О префиксах в 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 - 76 просмотров


Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 3. Синтаксис.
Аксиоматический CSS. Часть 2


Комментарии




Зарегистрируйтесь или войдите в Ваш аккаунт, чтобы оставить комментарий.



 

Вход на сайт


Avatar