Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 45
Люблю я Ваши статьи. Очень помогают в разработке. Руководствуюсь ими при создании CMS/CMF
Пойду сделаю кофе, вникать долго, но интересно. :)
Во-вторых, сообщить браузерам, что они могут отобразить страницу без первого массива правил (ведь если в нем содержатся только фоновые изображения, то они могут и подождать чуть-чуть).и пусть весь мир подождет… извините, не сдержался)
Далеко не всегда фоновые изображения могут подождать, особенно если это фоновое изображение для какой-нибудь кнопки, или заголовка, чего конечно же не должно быть, но у дизайнеров другая точка зрения)
есть хорошее английское слово accessibility — это когда мы думаем о разных пользователях, а не только с безлимитным каналом и самым продвинутым браузером. Поэтому протестировать страницу «без картинок» просто необходимо перед ее публикацией. А уж как она должна выглядеть при этом — лучше решить дизайнерам и тех. директору
вот именно accessibility это и касается в первую голову, и «первое» правило accessibility говорит о том что заголовки должны быть текстовые, по-этому в html делается текстовый заголовок, который потом скрывается стилями, и вместо него подкладывается картинка, потому что дизайнер решил что здесь должен быть именно такой шрифт и никакой другой, а @font-face поддерживают единицы. В данном случае, сначала отобразится вся страница и только потом появятся заголовки, что, согласитесь, не есть хорошо. Конечно, эту проблему можно решать и с помошью sIFR, например, но не всем такой способ по душе)
>если это фоновое изображение для какой-нибудь кнопки, или заголовка,
>чего конечно же не должно быть, но у дизайнеров другая точка зрения)
Если невозможно объяснить, что сайт должен быть работоспособен при отключенных картинках, от такого «дизайнера» надо избавляться.
В качестве альтернативы можно предложить вариант текстовых блоков, заменяющих картинки.
При загрузке картинки либо текст вытесняется в overflow hidden либо показывается/прячется через JS. В этом случе еще и бонус можно получить от SE ( а можно и бан)
>чего конечно же не должно быть, но у дизайнеров другая точка зрения)
Если невозможно объяснить, что сайт должен быть работоспособен при отключенных картинках, от такого «дизайнера» надо избавляться.
В качестве альтернативы можно предложить вариант текстовых блоков, заменяющих картинки.
При загрузке картинки либо текст вытесняется в overflow hidden либо показывается/прячется через JS. В этом случе еще и бонус можно получить от SE ( а можно и бан)
Заметил интересную особенность при таком подходе в IE6.
А именно, обратил внимание на поведение фоновых картинок, если их много и если на странице они повторяются.
например:
css
div.my_div {background-img: url('./my_img.gif'); width: 100px; height: 100px}
html
<div class=«my_div»></div>
<div class=«my_div»></div>
<div class=«my_div»></div>
<div class=«my_div»></div>
В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
Другие браузеры (и ие7) этого не делают.
Как только загрузилась картинка они сразу покажут ее во всех дивах.
PS. Это замечено, если css грузиться после загрузки всей страницы. То есть после официального onload
PSS.
>В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
Поправка:
Он заново не грузит, точнее он посылает запрос на загрузку картинки, получает 304 и только потом берет ее из кеша.
А именно, обратил внимание на поведение фоновых картинок, если их много и если на странице они повторяются.
например:
css
div.my_div {background-img: url('./my_img.gif'); width: 100px; height: 100px}
html
<div class=«my_div»></div>
<div class=«my_div»></div>
<div class=«my_div»></div>
<div class=«my_div»></div>
В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
Другие браузеры (и ие7) этого не делают.
Как только загрузилась картинка они сразу покажут ее во всех дивах.
PS. Это замечено, если css грузиться после загрузки всей страницы. То есть после официального onload
PSS.
>В этом случае ие6 начинает грузить для каждого дива ЗАНОВО картинку.
Поправка:
Он заново не грузит, точнее он посылает запрос на загрузку картинки, получает 304 и только потом берет ее из кеша.
сегодня как раз этим и занимался :)
летает в воздухе наверное ;)
летает в воздухе наверное ;)
Ничего не понял, но все равно круто, смогу лишь только повторить по аналогии. Спасибо автору!
Попробуйте прочитать по порядку статьи
webo.in/articles/habrahabr/08-all-about-css-sprites/
webo.in/articles/habrahabr/29-all-about-data-url-images/
webo.in/articles/all/data-url-ie/
webo.in/articles/habrahabr/46-cross-browser-data-url/
webo.in/articles/habrahabr/52-css-sprites-are-evil/
это должно помочь :)
webo.in/articles/habrahabr/08-all-about-css-sprites/
webo.in/articles/habrahabr/29-all-about-data-url-images/
webo.in/articles/all/data-url-ie/
webo.in/articles/habrahabr/46-cross-browser-data-url/
webo.in/articles/habrahabr/52-css-sprites-are-evil/
это должно помочь :)
Скромно замечу, что похоже, у автора навязчивое желание использовать узкий термин reflow там, где можно обойтись русским и априори гораздо более понятным для более широких масс «перерисовка страницы». Более того, термин reflow введён и используется, насколько мне известно, главным образом, в Mozilla, и применительно к другим браузерам такую перерисовку так обычно не называют. ;-)
По моему, достаточно сомнительный прирост скорости в 12% с учетом проблем которые с этим возникают.
:) CSS Sprites тоже достаточно сомнительная техника, а использовать ее сложнее в свете данной статьи
Это все хорошо, и я поддерживаю такого рода изыскания. Вот сейчас воодушевленные специалисты по верстке все кинулись оптимизировать, расковыривать свои таблицы в несколько потоков, время тратят…
А php/asp/pithon и т. д. (подставьте что больше нравиться) программер не озаботился оптимизацией серверной и на фоне 5 секунд загрузки на нагруженном сервере прирост скорости на 0.1 сек не очень заметен. Или контент менеджер вставляет в статью картинку в 600Кб и в ус не дует.
А php/asp/pithon и т. д. (подставьте что больше нравиться) программер не озаботился оптимизацией серверной и на фоне 5 секунд загрузки на нагруженном сервере прирост скорости на 0.1 сек не очень заметен. Или контент менеджер вставляет в статью картинку в 600Кб и в ус не дует.
*python конечно же :)
Да, безусловно повышение качества верстки необходимо. Но не стоит впадать в крайности. Многие верстальшьики сейчас не могут пройти простой тест на css select'ы не говоря уже о нюансах оптимизации. Я тоже согласен с тем, что такие лабораторные работы по нахождению различных новых техник подталкивают к более углубленному изучению вопроса.
Зато сайт автора грузится быстрее всех, что я встречал
интересный поход, спасибо за статью. возникли вопросы
1) как бы нормально автоматизировать сборку таких CSS файлов.
2) для Safari я так понял проблема в том что, он не начинает отображать страницу пока не загрузит все стили? можно запросить стили используя AJAX + после загрузки затолкать css в head через style
1) как бы нормально автоматизировать сборку таких CSS файлов.
2) для Safari я так понял проблема в том что, он не начинает отображать страницу пока не загрузит все стили? можно запросить стили используя AJAX + после загрузки затолкать css в head через style
автоматизировать просто: достаточно собирать все CSS-файлы в один, потом выделять правила, содержащие
Насчет Safari — спасибо за совет. Только ведь у нас второй файл ресурсный, в нем кроме самих CSS-объявлений еще и комментарии с mhtml-картинками зашиты… И как их скормить IE через AJAX — это еще придумать надо…
background: ... url(), в одном файле оставлять только цвет фона (если есть в правиле), в другой — отделять полностью селектор с фоновой картинкой, повтором и позиционированием. Дальше прогонять второй файл (или дробить дальше) через инструмент, заменяющий вызовы картинок на комбинированный data:URLНасчет Safari — спасибо за совет. Только ведь у нас второй файл ресурсный, в нем кроме самих CSS-объявлений еще и комментарии с mhtml-картинками зашиты… И как их скормить IE через AJAX — это еще придумать надо…
скорее всего придется отказаться от CSS спрайтов, ваш подход видится мне более привлекательным.
для ИЕ можно и не закачивать через АЯКС, а так как вы писали. ну и возможно все ж как то можно затолкать в ИЕ mhtml :)
для ИЕ можно и не закачивать через АЯКС, а так как вы писали. ну и возможно все ж как то можно затолкать в ИЕ mhtml :)
да я чуток обмозговал — проблема же только в Safari, а ему mhtml не нужен… В общем, буду думать на досуге :)
хотя если MHTML не поддерживает прозрачные картинки, это гораздо хуже, у меня последнее время чуть ли не одни полупрозрачные изображения
а может возможно использовать MHTML + Filter для прозрачности?
если можно решить вопрос с прозрачностью мне тогда интересно будет сделать авто сборщик css -> dataURL + MHTML, который в последующем при договоренности можно будет вставить как сервис в webo.in.
буду копать, как решать вопрос с прозрачностью. Но в любом случае для IE можно клеить прозрачные спрайты, а для всех (и всего) остальных в data:URL + mhtml
если клеить для ИЕ прозрачные спрайты, тогда нет смысла делать автосборщик data:URL, потому что получается 2 работы направлены на решение одной задачи.
частично соглашусь, однако, через полгода после выхода IE8, доля «IE» (который не понимает data:URI) сократится до 30-40%. Поэтому я бы предпочел все же 2 работы :)
я думаю можно спрайты упустить, т. е. для ИЕ качать поотдельности каждую картинку.
спрайты реально убивают много времени.
надеюсь всеже что можно както решить опрос с прозрачностью и MHTML
спрайты реально убивают много времени.
надеюсь всеже что можно както решить опрос с прозрачностью и MHTML
Итак. Проблемы абсолютно те же самые, что и для обычного PNG. А именно: нужен AlphaImageLoader для IE6-. Если нужно повторение картинки по осям — методы решения абсолютно аналогичны (дополнительная разметка).
Я собрал две страницы
webo.in/tests/mhtml-transparency/50kb/
webo.in/tests/mhtml-transparency/100kb/
IE позволяет запихивать в mhtml достаточно большие картинки (показывает корректно обе страницы). FF/Opera только первую (data:URI больше ~30Кб не лезет).
Естественно, используется PNG-24. Возможно, есть какие-то грабли конкретно для PNG-8 или GIF. Но поднятый вопрос (пока) решен успешно.
Я собрал две страницы
webo.in/tests/mhtml-transparency/50kb/
webo.in/tests/mhtml-transparency/100kb/
IE позволяет запихивать в mhtml достаточно большие картинки (показывает корректно обе страницы). FF/Opera только первую (data:URI больше ~30Кб не лезет).
Естественно, используется PNG-24. Возможно, есть какие-то грабли конкретно для PNG-8 или GIF. Но поднятый вопрос (пока) решен успешно.
ну вот и отлично, я так и думал что решение то же что и для обычного ПНГ.
грабля с размером неприятна. для полного счастья нехватает все ж «больше-размерности». ну все рано, появился основательный повод сделать автосборщик.
грабля с размером неприятна. для полного счастья нехватает все ж «больше-размерности». ну все рано, появился основательный повод сделать автосборщик.
да, меня уже просили прикрутить что-то подобное для webo.in, но пока это нужно лишь единицам, как я понимаю.
В общем, это стоит в to-do листе, но в любом случае, нужен URL CSS-файла, чтобы прикручивать (для mhtml). Т. е. будет доступно только для проверенных сайтов. + я бы разграничивал по объему изображений (т. е. до 10Кб клеил, остальное — пусть отдельными файлами).
В общем, это стоит в to-do листе, но в любом случае, нужен URL CSS-файла, чтобы прикручивать (для mhtml). Т. е. будет доступно только для проверенных сайтов. + я бы разграничивал по объему изображений (т. е. до 10Кб клеил, остальное — пусть отдельными файлами).
прочел статью, на которую дана ссылка в начале топика, пробежал глазами сам топик.
по поводу проблемы сложилось четкое ощущение: высосано из пальца.
мотивирую:
1. проблемы css-спрайтов обрисованы для тех случаев, когда они (спрайты) используются «без головы», а некоторые упомянутые проблемы, весьма спорны (в том смысле, что являются ли они проблемами, — к примеру, в статье «спрайты — зло» написано, что они (спрайты) требуют введения доп. несемантической разметки, заменяющей, в принципе, тег img и это дано как проблема; однако так ли это — бооольшой вопрос)
2. весьма странно, что в оригинале статьи о том, что спрайты — зло, автор указывает на невозможность позиционирования фонового png с прозрачностью для IE6… есть же уже IE PNG fix 2 пусть и альфа, но вполне работает.
3. описанная в этом топике методология, по моему скромному мнению, весьма специфична и может использоваться на ресурсах со сверхвысокой посещаемостью, коих в сети весьма и весьма немного.
резюме: выигрыш по скорости 12% — рассчетный. тестов с описанием методологии тестирования нет.
описанное решение, на мой взгляд, является пока слишком сырым для практического использования.
предпочитаю нормально сделанные спрайты.
по поводу проблемы сложилось четкое ощущение: высосано из пальца.
мотивирую:
1. проблемы css-спрайтов обрисованы для тех случаев, когда они (спрайты) используются «без головы», а некоторые упомянутые проблемы, весьма спорны (в том смысле, что являются ли они проблемами, — к примеру, в статье «спрайты — зло» написано, что они (спрайты) требуют введения доп. несемантической разметки, заменяющей, в принципе, тег img и это дано как проблема; однако так ли это — бооольшой вопрос)
2. весьма странно, что в оригинале статьи о том, что спрайты — зло, автор указывает на невозможность позиционирования фонового png с прозрачностью для IE6… есть же уже IE PNG fix 2 пусть и альфа, но вполне работает.
3. описанная в этом топике методология, по моему скромному мнению, весьма специфична и может использоваться на ресурсах со сверхвысокой посещаемостью, коих в сети весьма и весьма немного.
резюме: выигрыш по скорости 12% — рассчетный. тестов с описанием методологии тестирования нет.
описанное решение, на мой взгляд, является пока слишком сырым для практического использования.
предпочитаю нормально сделанные спрайты.
1. Классическим примером является создание блока со скругленными уголками. В большинстве случаев требуется введение дополнительной разметки (вложенных div'ов или псевдо-картинок)
2. Не совсем понял мысль. Процитирую из статьи
3. Описанная методология может использоваться на любых ресурсах. Вы же не будете делать дерьмовый дизайн для сайта с 5 посетителями в день? А если эти 5 человек заходят, чтобы выбрать коттедж на Новой Риге?
2. Не совсем понял мысль. Процитирую из статьи
Спасибо rsa, также у IE возникают проблемы с позиционированием полупрозрачных PNG-картинок (которые нужно вставлять через AlpaImageLoader). Таким образом, больше одной такой картинки в спрайт не добавить (в левый верхний угол). Спасибо sirus, это можно обойти при помощи crop или, как указал pepelsbey, абсолютного позиционирования и дополнительной разметки.
3. Описанная методология может использоваться на любых ресурсах. Вы же не будете делать дерьмовый дизайн для сайта с 5 посетителями в день? А если эти 5 человек заходят, чтобы выбрать коттедж на Новой Риге?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Выносим CSS в пост-загрузку