Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 48
Помоему должно находиться в "веб-разработке"...
Не уверен. Статья слишком короткая и метод довольно прост для web-разработки, как мне кажется.
А для касканых таблиц стилей, метод с использованием js подходит?
а единственный JS-файл на странице на верстку не влияет, он нужен для переключения фона страницы для большей наглядности...
Под IE7 оно просто невыносимо тормозит. Смотрю стили — а там expression. Охренеть, всё понятно. Начитались говностатей и приняли за библию?
> Громоздкие файлы стилей для IE6-7 воспринимаем как неизбежность...
Сфигали это мы воспринимаем это как неибежность? Почему у меня вёрстка таких макетов(для любопытных: скоро запустится, посмотрите сами) обходится без дополнительных стилей для IE7(не IE6)?
Вот так начинающих верстальщикови копипастеров учат вёрстать через жопу.
Ребята, все мы работаем чтобы денег получать, но не надо свою работу считать за Колосс Родосский и парить всякую хрень остальным. Во-вторых, эта тема уже настолько избита, уже столько способов сделать закругленные углы(даже совсем недавно на хабре было несколько статей на эту тему), что ещё один — просто никуда не влезет.
> Громоздкие файлы стилей для IE6-7 воспринимаем как неизбежность...
Сфигали это мы воспринимаем это как неибежность? Почему у меня вёрстка таких макетов(для любопытных: скоро запустится, посмотрите сами) обходится без дополнительных стилей для IE7(не IE6)?
Вот так начинающих верстальщиков
Ребята, все мы работаем чтобы денег получать, но не надо свою работу считать за Колосс Родосский и парить всякую хрень остальным. Во-вторых, эта тема уже настолько избита, уже столько способов сделать закругленные углы(даже совсем недавно на хабре было несколько статей на эту тему), что ещё один — просто никуда не влезет.
в дополнение: http://habrahabr.ru/blog/webdev/47616.ht…
Дайте библию почитать, я уже запутался в ваших спорах%)
Читайте наздоровье http://www.w3.org/
Почему у меня вёрстка таких макетов(для любопытных: скоро запустится, посмотрите сами) обходится без дополнительных стилей для IE7(не IE6)?
Потому что IE7 не понимает псевдоклассы :before и :after. Только поэтому у меня появились отдельные стили для IE7. И все это было сделано, замечу, с одной целью — сделать с использованием наименьшего числа несемантичных элементов.
Если вы сверстаете полностью полупрозрачный блок, состоящий из 1 div'а без скриптов для нормальных браузеров и при этом все будет работать в IE6 - то вы станете моим кумиром. Дерзайте.
Мне заняться нечем, да? Верстать вам полупрозрачные блоки? Я уже наверстался, хватит. А такие полупрозрачные блоки можно сверстать тремя дивами без дополнительных стилей в IE7. Дерзайте, и не сотворите себе кумира.
Как, не расскажете? На словах, чисто теоретически. Можете даже ссылочкой поделиться на описание метода, которым вы бы воспользовались. Надеюсь, это не займет у вас слишком много времени. Напомню постановку задачи: блок должен быть резиновым, границы представляют собой полупрозрачный png (т.к. присутствует также тень), все должно быть кроссбраузерно и + без дополнительных хаков для IE7.
expression можно выполнять одноразово и тогда это - замечательнейший инструмент, благодаря которому можно верстать очень красиво, несмотря на отсутствие поддержки в IE многих важных css свойств.
FF3 resize плохо переносит
А expression — зло, руки за него отрывать нужно. Или оптимизировать
http://webo.in/articles/habrahabr/10-css…
А expression — зло, руки за него отрывать нужно. Или оптимизировать
http://webo.in/articles/habrahabr/10-css…
Нифига не зло, если использовать правильно и тестировать на скорость выполнения. Например, expession создающий ноды через createElement ничуть не тормозит, на 650 элементах страница ренедерится так же быстро, как будто этот элемент был в html, а иногда и чуть быстрее (или погрешность или тормоза парсера).
Ах да, я же не комментирую больше на хабре ;)
Ах да, я же не комментирую больше на хабре ;)
в опере углы разбросались.
95
95
прада?
http://img186.imageshack.us/img186/1839/…
такая же опера.
другое дело что это всё грузилось около минуты (с интернетом у меня всё в порядке)
http://img186.imageshack.us/img186/1839/…
такая же опера.
другое дело что это всё грузилось около минуты (с интернетом у меня всё в порядке)
Версия
9.50
Сборка
10063
Платформа
Win32
Система
Windows XP
Java
Java не установлена
XHTML+голос
Плагин не загружен
грузится сразу
http://f1nt.ru/_tmp/qrn.jpg
9.50
Сборка
10063
Платформа
Win32
Система
Windows XP
Java
Java не установлена
XHTML+голос
Плагин не загружен
грузится сразу
http://f1nt.ru/_tmp/qrn.jpg
другое дело что это всё грузилось около минуты (с интернетом у меня всё в порядке)
дык, 110mb.com сам по себе очень часто притормаживает...
Немного не по теме:
А мне не нравится, что нажимая по ссылке смены фона попадаю в начало страницы - разве нельзя от # в ссылке избавиться и сразу туда через javasript: писать?..
А мне не нравится, что нажимая по ссылке смены фона попадаю в начало страницы - разве нельзя от # в ссылке избавиться и сразу туда через javasript: писать?..
Удивительно хорошее применение текстам с Яндекс.Рефератов. А то Lorem Ipsum уже приелось, да и не по-русски :)
Каскадные таблицы стилей — это не тот раздел, где можно размещать разные методы вёрстки. Топик точно не в том разделе.
1. Зачем вы убили мой IE6? (так и тянет сказать "они убили Кени" (с)) Так и не смог открыть в IE6 эту страницу, браузер просто виснет. Посмотрел ie6.css, и не удивился поведению IE. И это только один блок, а если из будет несколько? Думаю что страницей пользоваться в IE не получится (в IE7 не смотрел, но думаю там ситуация не многим лучше).
2. Expression - зло. Уже не раз об этом писали (и даже в комментах к этому топику). Их стоит использовать осторожно, но лучше вообще про них забыть. Ваш выигрыш в 6 div'ов капля в море по сравнению с потерями от использования expression (а доля пользователей IE весьма велика). Называется здесь чиним, тут ломаем.
3. Смысл вашей статьи совершенно не ясен. Вы хотели показать как вы умеете? Оценили. Но мне кажется было бы лучше если Вы потрудились описать технику, чтобы не нужно было лезть в исходники и натыкаться на "решение с помощью генерируемого контента". Напиши Вы об этом в заметке, я бы не полез - ей богу. А новички чему то да научились.
4. Да, а еще можно это провернуть с помощью SVG, VML, border-radius (см. ссылку в комментарии ELV1S) или canvas+js. А в Safari и FF3.1 можно использовать border-image, в Safari еще и multiple backgrounds (несколько фоновых изображений для одного блока). Но! Это все частные решения, которые порождают свою реализацию чуть ли не под каждый браузер. А смысл? ИМХО лучше 9, да даже 20 DIV'ов, но с единым (пусть будут некоторые фиксы для IE6) стилем - причем это реально. Чем двадцать разношерстных решений для разных браузеров.
2. Expression - зло. Уже не раз об этом писали (и даже в комментах к этому топику). Их стоит использовать осторожно, но лучше вообще про них забыть. Ваш выигрыш в 6 div'ов капля в море по сравнению с потерями от использования expression (а доля пользователей IE весьма велика). Называется здесь чиним, тут ломаем.
3. Смысл вашей статьи совершенно не ясен. Вы хотели показать как вы умеете? Оценили. Но мне кажется было бы лучше если Вы потрудились описать технику, чтобы не нужно было лезть в исходники и натыкаться на "решение с помощью генерируемого контента". Напиши Вы об этом в заметке, я бы не полез - ей богу. А новички чему то да научились.
4. Да, а еще можно это провернуть с помощью SVG, VML, border-radius (см. ссылку в комментарии ELV1S) или canvas+js. А в Safari и FF3.1 можно использовать border-image, в Safari еще и multiple backgrounds (несколько фоновых изображений для одного блока). Но! Это все частные решения, которые порождают свою реализацию чуть ли не под каждый браузер. А смысл? ИМХО лучше 9, да даже 20 DIV'ов, но с единым (пусть будут некоторые фиксы для IE6) стилем - причем это реально. Чем двадцать разношерстных решений для разных браузеров.
Спасибо за конструктивный комментарий.
1. Прозвучит странно, но у меня под 7-м IE тормозило сильнее, чем под 6-м. Сейчас вот пытался оптимизировать expression, но без особого успеха.
2. Вы правы, но в некоторых ситуациях все же и мой способ с кучей expression'ов имеет право на жизнь.
3. Каюсь, поленился. Посчитал, что ссылки на метод, на которые я опирался, будет достаточно... Уже понял, что бы неправ.
4. Единственное, что помешало мне сделать все красиво и без хаков под IE - это эмуляция при помощи expression :before и :after... Именно строчка с this.innerHTML (и даже с insertAdjacentHTML как я сегодня убедился) заставляет IE корчиться в муках...
Так как в JavaScript я совершенно не разбираюсь, то мне сложно искать легковесный способ, позволяющий внедрять дополнительные блоки в HTML.
Не могли бы вы направить меня в нужную сторону? Хочется написать такой скрипт, который бы быстро внедрял дополнительные блоки в код, а уже после выполнения скрипта подключались expression'ы с фильтром для IE6... Ну как-то так :)
1. Прозвучит странно, но у меня под 7-м IE тормозило сильнее, чем под 6-м. Сейчас вот пытался оптимизировать expression, но без особого успеха.
2. Вы правы, но в некоторых ситуациях все же и мой способ с кучей expression'ов имеет право на жизнь.
3. Каюсь, поленился. Посчитал, что ссылки на метод, на которые я опирался, будет достаточно... Уже понял, что бы неправ.
4. Единственное, что помешало мне сделать все красиво и без хаков под IE - это эмуляция при помощи expression :before и :after... Именно строчка с this.innerHTML (и даже с insertAdjacentHTML как я сегодня убедился) заставляет IE корчиться в муках...
Так как в JavaScript я совершенно не разбираюсь, то мне сложно искать легковесный способ, позволяющий внедрять дополнительные блоки в HTML.
Не могли бы вы направить меня в нужную сторону? Хочется написать такой скрипт, который бы быстро внедрял дополнительные блоки в код, а уже после выполнения скрипта подключались expression'ы с фильтром для IE6... Ну как-то так :)
Хорошо что адекватно воспринимаете критику :)
1. Разные ОС, конфигурации и т.п. ничего удивительного
2. Боюсь что только в демонстрационных целях, никак не в продакшене.
В плане IE могу посоветовать копнуть в сторону behaviour, хороший вариант для того чтобы вставить дополнительные элементы (и не только). Если покопаться сможете реализовать тоже самое, только без expression. Да, потребуется js - но в expression'ах он так же используется. В качестве примера можете взглянуть на IE Fix PNG 2.0 о котором недавно писали на Хабре. Используется технология behaviour. Там как раз создаются дополнительные блоки для эмуляции background-repeat, что несколько сложнее вашей задачи. Конечно скрипт немного сложноват для учебного пособия, но, думаю, погуглив найдете множество более простых примеров.
И кстати можно написать что-то вроде
и все это включить в единственный файл стилей
К сожалению правило
IE проигнорирует (помоему так, хотя попробуйте, может что получится - тогда вы получите еще более короткий стиль).
В итоге, для нужных блоков вам нужно будет прописать
Можете включить в condition comments, а можете и так оставить, кроме IE это свойство никто не понимает.
ЗЫ хотя я все равно рекомендовал бы использовать обычные техники, и общий стиль для всех.
ЗЫ В mozilla есть тоже интересная технология похожая на эту. Там можно использовать -moz-binding которую иногда приходится использовать. Но не стоит этим злоупотреблять и лучше использовать в крайних случаях.
1. Разные ОС, конфигурации и т.п. ничего удивительного
2. Боюсь что только в демонстрационных целях, никак не в продакшене.
В плане IE могу посоветовать копнуть в сторону behaviour, хороший вариант для того чтобы вставить дополнительные элементы (и не только). Если покопаться сможете реализовать тоже самое, только без expression. Да, потребуется js - но в expression'ах он так же используется. В качестве примера можете взглянуть на IE Fix PNG 2.0 о котором недавно писали на Хабре. Используется технология behaviour. Там как раз создаются дополнительные блоки для эмуляции background-repeat, что несколько сложнее вашей задачи. Конечно скрипт немного сложноват для учебного пособия, но, думаю, погуглив найдете множество более простых примеров.
И кстати можно написать что-то вроде
.ie7-left-top-corner
{
...
}
.ie6-left-top-corner
{
...
}
и все это включить в единственный файл стилей
К сожалению правило
.ie7-left-top-corner,
.some-block:before
{
...
}
IE проигнорирует (помоему так, хотя попробуйте, может что получится - тогда вы получите еще более короткий стиль).
В итоге, для нужных блоков вам нужно будет прописать
.corner-block
{
behaviour: url(...);
}
Можете включить в condition comments, а можете и так оставить, кроме IE это свойство никто не понимает.
ЗЫ хотя я все равно рекомендовал бы использовать обычные техники, и общий стиль для всех.
ЗЫ В mozilla есть тоже интересная технология похожая на эту. Там можно использовать -moz-binding которую иногда приходится использовать. Но не стоит этим злоупотреблять и лучше использовать в крайних случаях.
Зачем изобретать велосипед )))
А как же способ от В. Токмакова (artlebedev.ru)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Полупрозрачный блок со скругленными углами