О префиксах в CSS
О спецификации в современных каскадных таблицах стилей написано много и я не собираюсь повторять эти публикации. В той или иной мере программисты-разработчики браузеров стремятся разнообразить возможности своих детишек. Первым и самым лучшим становится тот, кто предоставит больше свободы и больше возможностей в интерпретации современных CSS. Спецификация CSS3 набирает обороты. Это радует, прежде всего, нас – дизайнеров. А мы, в свою очередь, радуем наших посетителей невиданными доселе «штучками». Некоторые из них вырастают впоследствии в «сниппеты». Некоторые остаются чистым экспериментом. Но, тем не менее, они добавляют приятности и красоты в дизайн современных сайтов и предоставляют чистую свободу творчества дизайнерам.
Я собираюсь рассказать вам об обнаруженном мною глюке популярного браузера Опера. Столкнулся я с этим при вёрстке просматриваемого вами сайта. Мне захотелось сделать оригинальный заголовок сайта «h1», который, по сути, заменяет логотип. Сразу оговорюсь, выбранный мною эффект поддерживается не всеми браузерами, а если быть точным – почти всеми не поддерживается! И поэтому для достижения эффекта используется префикс «-webkit-», заранее отсекающий все браузеры, кроме «Chrome» и «Safari», чтобы они и не пробовали интерпретировать приведённые ниже строки.
/* Заголовок с градиентом */
h1 {
color :#09e;/* Для всех браузеров просто задаётся цвет текста */
font-size :1.500em;
line-height :1.5;
font-weight :400;
text-align :center;
letter-spacing :-0.05em;
background-image :-webkit-linear-gradient(90deg,#fb83fa,#00aced);/* Для Хрома и Сафари заголовок заливается градиентом */
-webkit-background-clip: text;/* Градиент обрезается по силуэту текста */
-webkit-text-fill-color: transparent;/* Остальное становится прозрачным */
}
Каково же было моё удивление, когда при проверке совместимости FireFox выдал мне градиентную заливку на всю высоту заголовка и на всю ширину страницы! Оказывается, Mozilla понимает и принимает префикс «-webkit-» в этом случае, хотя и не справляется с интерпретацией свойств и значений данной спецификации. Свойство «background-clip:text;» ей недоступно в принципе.
Вот так Opera предстала перед нами на «чужих костылях»! Она поняла и обработала «-webkit-linear-gradient», но дальше не справилась. Возникает вопрос, а почему Опера попыталась интерпретировать чужой, во всех смыслах, префикс?.. (Можете задать этот вопрос разработчикам)
Пришлось мне последней строчкой скрыть этот позор очень популярного браузера.
background-image :-o-linear-gradient(90deg,#efefef,#dedede);/* Специально для Оперы */
Если кто-то зашёл на мой сайт, и увидел «некрасиво», значит я не учёл его браузер, когда делал красиво. И это не моя проблема (IMHO), это проблема разработчиков браузеров. Пишите им, и у вас будет красиво! Участвуйте в улучшении своих любимых браузеров!
Опубликовал Administrator - 3 апреля 2016, 06:32 - 17 просмотров
Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 3. Синтаксис.
Аксиоматический CSS. Часть 2