Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 25
У меня ubuntu 12.04 Гугл хром последний на текущий момент — вместо главной страницы все полностью черное, на других либо пропадает со временем черное или сразу его нет. Может что с опенгл (через него вроде гугл рисует кое что в ксс3).
В лисе нормально.
В лисе нормально.
Я не понимаю, это теперь у веб-мастеров гонка такая, «исключить из сайта все картинки и заменить его кодом CSS»?
А вы не видите преимуществ? Таких как масштабируемость, меньший объём подключаемых файлов (и их количества)? И это только первое, что пришло в голову.
по-моему embedded svg в css будет лучше
Недостатков хоть отбавляй: ненадежность, некроссбраузерность, ресурсоемкость, непонятность, сложность модификации и поддержки.
Насчет объема спорно — спрайты и base64 никто не отменял.
На мой взгляд, пока что единственная действительно интересная альтернатива иконкам-картинкам — это специальные пиктографические шрифты (и то с оговорками).
Насчет объема спорно — спрайты и base64 никто не отменял.
На мой взгляд, пока что единственная действительно интересная альтернатива иконкам-картинкам — это специальные пиктографические шрифты (и то с оговорками).
Если брать исключительно иконки, то скорей всего логичней использовать картинки, к тому же чаще всего иконки не такие простые, а с множеством градиентов и теней.
Некроссбраузерность рано или поздно отпадёт, даже в 10 IE уже более-менее сносная поддержка CSS3.
Ресурсоёмкость — не настолько критично. Обработка таких псевдо-изображений занимает меньше, чем загрузка их в сжатом виде. А растровый вариант так или иначе кэшируется в памяти и рисуется именно оттуда, так что с отрисовкой разницы нет.
Модификация и поддержка? По-моему даже проще, ибо, например, поменять цвет какого-либо элемента можно прямо в текстовом редакторе за несколько секунд, не запуская графический и не вбивая новые данные.
Объём — не очень спорно. Спрайты и base64 всё равно увеличивают объём передаваемых данных ощутимо больше, чем просто CSS-код. А если убрать первый недостаток (некроссбраузерность) и отменить вендор-специфичные префиксы — ещё раза в 3 полегчает.
И, да, я идеалист, хотя принимаю как факт то, что в текущих реалиях недостатки есть.
Ресурсоёмкость — не настолько критично. Обработка таких псевдо-изображений занимает меньше, чем загрузка их в сжатом виде. А растровый вариант так или иначе кэшируется в памяти и рисуется именно оттуда, так что с отрисовкой разницы нет.
Модификация и поддержка? По-моему даже проще, ибо, например, поменять цвет какого-либо элемента можно прямо в текстовом редакторе за несколько секунд, не запуская графический и не вбивая новые данные.
Объём — не очень спорно. Спрайты и base64 всё равно увеличивают объём передаваемых данных ощутимо больше, чем просто CSS-код. А если убрать первый недостаток (некроссбраузерность) и отменить вендор-специфичные префиксы — ещё раза в 3 полегчает.
И, да, я идеалист, хотя принимаю как факт то, что в текущих реалиях недостатки есть.
Я правильно понимаю? Пара лишних килобайт в CSS (спрайты в base64) сильно хуже нежели постоянные тормоза, увеличение времени отрисовки страницы, задержки при перерисовке и т.д?
Имхо, это лишь альтернатива SVG, причем плюсов особо нету. Более того, где вы найдете дизайнера который вам такие иконки подготовит? или только готовые использовать? Как по мне лучше уж отрисовать иконку в SVG и не дурить голову.
Имхо, это лишь альтернатива SVG, причем плюсов особо нету. Более того, где вы найдете дизайнера который вам такие иконки подготовит? или только готовые использовать? Как по мне лучше уж отрисовать иконку в SVG и не дурить голову.
Да, нещадно тормозящий браузер — это, конечно, преимущество.
На масштабируемость косо криво да можно согласится, а вот про обьем вы извините — вы всерьез хотите сэкономить пару килобайт спрайта взамен на 60 блоков чудовищных CSS, которые можно изменять только вручную с включенными на полную мощность мозгами?
Попахивает садомазо, — то что дизайнер набросает в PNG или SVG за 10 минут, вы добровольно хотите превратить в свой собственный головняк )
Попахивает садомазо, — то что дизайнер набросает в PNG или SVG за 10 минут, вы добровольно хотите превратить в свой собственный головняк )
Хорошо, если предположить, что это действительно пара килобайт, у нас верно настроены параметры кэширования на клиентской стороне, и достаточно мощный сервер / достаточно низкая популярность, чтоб не экономить на лишних запросах — вопрос с объёмом отпадает.
А вот масштабируемость вектора действительно можно записать в критичные плюсы. SVG — было бы хорошо, если бы все его поддерживали, причём одинаково. Но тут такой же вопрос, как и с css3.
Но вот в чём вы меня не переубедите — так это в том, что в случае с иконками на css3 гораздо проще и эффектнее организовывать анимацию этих самых иконок.
А вот масштабируемость вектора действительно можно записать в критичные плюсы. SVG — было бы хорошо, если бы все его поддерживали, причём одинаково. Но тут такой же вопрос, как и с css3.
Но вот в чём вы меня не переубедите — так это в том, что в случае с иконками на css3 гораздо проще и эффектнее организовывать анимацию этих самых иконок.
У меня при открытии one-div.com/popular/ не работает сролл и браузер начинает тупить. Firefox 11, Ubuntu 12.04. Не знаю с чем это связано.
тормозит знатно, если таким будет будщее интернета, то я пожалуй пас
Раскрою секрет небольшой. Данный метод ужасно грузит браузер. Однажды делал сайт без картинок. Есть програмка на яве для преобразования картинок в таблицу. Все круто, но даже мой феном х4 загрузился почти на 100%. Как выход нашел svg. Тут используется css — это ничем не лучше. Пока увы векторные сайты создавать не возможно (полноценно).
При нажатии на снопку CSS вылетает alert сообщение но туда не помещается весь код и, например, Chrome его обрезает
Это имба!) Очень круто
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
One Div: иконки на CSS