Вендорные префиксы css

Вендорные префиксы в CSS

Применим вендорные префиксы, используемые браузерами для экспериментальных CSS-свойств.

Вендорные префиксы это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.

Приведу список некоторых префиксов для наиболее распространенных браузеров.

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузеров из семейства Mozilla
  • -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
  • -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
  • -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
  • -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

Использовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow в старых версиях Opera не поймет, если не написать его таким образом:

-o-text-overflow

А CSS-фильтры от Microsoft можно использовать в ИЕ8 следующим образом:

-ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=50)

Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге

А на сайте apple.com их применяют во всевозможных вариантах, например для закругления границ интересной таблицы цен:

/* tabular */#main table { border-collapse: separate; *border-collapse: collapse; width: 100%; font-size: 12px; font-family: «Lucida Grande», Arial, Verdana, sans-serif; }#main table th,#main table td { border: 1px solid #ccc; border-width: 1px 0 0 1px; text-align: center; padding: 10px 10px 6px; }#main table .round_ul { border-radius: 4px 0 0 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -o-border-radius: 4px 0 0 0; -khtml-border-radius: 4px 0 0 0; }#main table .round_bl { border-radius: 0 4px 0 0; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -o-border-radius: 0 4px 0 0; -khtml-border-radius: 0 4px 0 0; }#main table .round_br { border-radius: 0 0 4px 0; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -o-border-radius: 0 0 4px 0; -khtml-border-radius: 0 0 4px 0; }#main table .round_ur { border-radius: 0 0 0 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; -o-border-radius: 0 0 0 4px; -khtml-border-radius: 0 0 0 4px; }#main table .rt { border-right-width: 1px; }#main table .btm { border-bottom-width: 1px; }

Источник: starhack.ru

Источник: http://yapro.ru/web-master/css/vendornie-prefiksi.html

Пора пересмотреть вендорные префиксы в CSS

От автора: префикс -webkit- сегодня настолько распространен в CSS, что некоторые сайты отказываются правильно работать без него.

В то время как для разработчиков вендорные префиксы css последние пару лет означали прямой знак не совсем идеальной работы свойств, это привело к тому, что Mozilla пошли на отчаянный, но необходимый шаг.

В Firefox 46 или 47 (релиз будет в апреле или мае 2016) Mozilla планирует ввести поддержку серии нестандартных –webkit- префиксов для повышения совместимости браузера с данным префиксом (даже на мобильных устройствах).

Идея не нова, Microsoft Edge также поддерживает различные -webkit- префиксы для совместимости. Opera начала поддерживать -webkit- префиксы в 2012, а затем перешла на Webkit движок Blink. W3C и разработчики браузеров не планировали использовать данный префикс в разработке сайтов:

«Официальная политика W3C гласит, что не следует использовать экспериментальные свойства в коде сайта. Однако люди используют их, так как хотят, чтобы их сайты использовали последние технологии и выглядели круто.» — страница W3C по оптимизации контента под разные браузеры

Обратите внимание

Тем не менее, разработчики всегда хотят получить доступ к последним свойствам как можно быстрее. Вендорные префиксы переворошили все с ног на голову и обеспечили Webkit доминирование, однако я считаю, что префиксы оказали огромное влияние на быстрое развитие интернета.

Способы Mozilla и Microsoft большинству сайтов только навредят. У большей части сайтов уже будут подключены префиксы –moz- или выяснится, что с новым обновлением Mozilla станет поддерживать новые свойства без нужды вносить изменения.

Однако как профессиональные веб-разработчики мы должны покончить с этим и понять, что в некоторых дизайнах могут выявиться неоднозначные результаты. Вы, может быть, уже и сами знаете, какие из ваших проектов угробит это обновление.

Веб-разработчики, настало время переосмыслить свой подход к вендорным префиксам и к их тестированию на сайтах.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Новые префиксы

Mozilla собирается включить ряд –webkit- префиксов. Из того, что я собрал, видно, что Mozilla не собирается сопоставлять свой список со свойствами Edge. Не всем свойствам нужна совместимость с движком Mozilla. Среди префиксов, которые Mozilla собирается добавить, судя по странице вики Compatibility/Mobile/Non Standard Compatibility будут следующие:

-webkit-flexbox

-webkit- для градиентов

-webkit-transforms

-webkit-transitions

-webkit-appearance

-webkit-background-clip

-webkit-device-pixel-ratio

-webkit-animation

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

-webkit-border*

Некоторые другие свойства могут быть в @-webkit-keyframes.

Тест на кроссбраузерность будет иметь решающее значение

Если вы, веб-разработчик не стали включать –moz- префикс, чтобы не проверять новые свойства CSS в Firefox, а срок сдачи подходит к концу, и заказчик заставляет вас добавить данный префикс, то вам придется заново тестировать сайт в Firefox 46 или 47. Данные версии выйдут в апреле или мае, так что у вас еще есть немного времени.

Чтобы протестировать свой веб-сайт, не дожидаясь выхода Firefox 46/47, можно активировать данные изменения в Firefox Nightly при помощи настройки layout.css.prefixes.webkit в about:config.

Если у вас установлена последняя версия Nightly, то по умолчанию должно стоять true. Пока что в Firefox Nightly работают не все изменения –webkit- префиксов, но все же это хорошая площадка, чтобы протестировать, как ваш сайт скоро будет выглядеть.

Я бы подождал марта перед серьезным тестированием сайта в Firefox Nightly.

Намного важнее, что Microsoft Edge уже интерпретирует и отображает –webkit- префиксы похожим образом. А это означает, что любые WebKit стили вашего сайта уже отображаются в браузере, от которого этого совершенно не ожидали. Если вы еще не работали с данным браузером, то установите себе Windows 10 и получите к нему доступ для тестирования сайтов.

Вендорные префиксы постепенно уходят

К счастью, вендорные префиксы постепенно уходят параллельно с тем, как команды разработчиков находят новые решения. Команда Chrome/Blink немного изменили свой подход:

«Забегая наперед, вместо включения вендорных префиксов по умолчанию мы будем держать обычные свойства за флагом «активировать экспериментальные свойства веб-платформы» в about:flags до тех пор, пока данные свойства не будут включены по умолчанию.» — Команда The Chrome/Blink

Команда Firefox пошла по схожему пути: «Основное направление работы в Mozilla сейчас это уход от вендорных префиксов, путем их отключения или же перевод их в состояние обычных свойств, если они уже стабильны. Это как минимум наша общая политика, отдельные случаи заслуживают исключений. » — Борис из Mozilla

Microsoft Edge также нацелены на удаление поддержки префиксов: «Microsoft также пытается избавиться от вендорных префиксов в Edge. Это значит, что разработчикам при использовании особенных HTML5 тегов или CSS свойств не придется добавлять специальный префикс для браузера Edge. Вместо этого разработчики будут писать стандартный код.» — Mashable

Изящная деградация при помощи префиксов больше не работает

Уход от вендорных префиксов означает только одно – методика изящной деградации через префиксы больше не выход.

Выделение конкретных браузеров через вендорные префиксы (к примеру, для Chrome) не входило в задачи этих префиксов; разработчикам всегда рекомендовалось использовать все префиксы (от –webkit- до –o-).

Если вы используете какой-либо функционал, работающий на свойствах с вендорными префиксами, а также использовали тенхнику изящной деградации в вашем дизайне для других браузеров, то больше это не работает.

Заключение

Времена меняются. WebKit доминирование было непреднамеренным и вызвало переполох и несовместимость в интернете.

Другие браузеры ищут способ расширить совместимость путем добавления –webkit- префиксов. Постепенно, с уходом вендорных префиксов, уйдет и данная проблема.

Разработчикам же стоит проверить, не вызывает ли использование префиксов нежелательных последствий в не WebKit браузерах.

Источник: https://webformyself.com/pora-peresmotret-vendornye-prefiksy-v-css/

Вендорные CSS префиксы

Вендорные префиксы — специальные приставки, которые добавляются перед названием CSS свойства и ориентированы на экспериментальные функции определенных браузеров. Для каждого браузера существует свой вендорный префикс.

Сегодня нам хотелось бы поговорить о вендорных префиксах, назвать самые распространенные из них и немного пофилосовствовать на тему целесообразности их применения.

Что такое вендор

Прежде всего, хотелось бы определить понятие слова «вендор», чтобы всем нам стало ясно, почему CSS префиксы называются именно вендорными, а не как то иначе. Вендор — компания или бренд, которая занимается выпуском продуктов или предоставлением услуг и поставляет их под собственной торговой маркой. Слово происходит от французского vendere — продавать.

Что такое вендорные префиксы в CSS

В случае с CSS префиксами, вендорами являются производители браузеров, которые используют свою торговую марку в сокращенном виде как приставку (префикс) к тем или иным CSS свойствам для идентификации. «А зачем использовать эти префиксы?», — спросите вы.

Вендорные префиксы используются различными браузерами для внедрения в список CSS свойств и поддержки их работы собственными движками новых экспериментальных свойств, которые пока еще официально не вошли в оборот и не были добавлены в спецификацию W3C.

Важно

Иными словами, какое-то свойство может выполнять совершенно новую и часто очень даже полезную функцию, которую раньше приходилось реализовывать с помощью специальных хаков, хитростей, уловок или даже джаваскриптов.

Читайте также:  Daily trades бинарный опцион

Однако это свойство еще не было добавлено к стандартным и может интерпретироваться далеко не всеми браузерами, для этого перед этим свойством и добавляется префикс с названием вендора, которому он принадлежит и в дальнейшем, при интерпретации браузером CSS кода, свойство будет правильно понято и выполнит функцию, для которой оно собственно и было предназначено.

Перечень основных вендорных префиксов

А теперь давайте приведем перечень основных вендорных префиксов, существующих на данный момент и известных нам.

  • -o- — браузер Опера
  • -moz- — браузеры семейства Мозилла (компания-производитель знаменитого Мозилла Файерфокс)
  • -ms- — Майкрософт Эксплорер
  • -webkit- — браузеры, использующие движок Вебкит — Гугл Хром, Сафари
  • -icab- — официальный альтернативный браузер Эппл — Айкаб
  • -khtml- — редко используемый KHTML интерпретатор для KDE

Для того, чтобы воспользоваться тем или иным вендорным префиксом, нужно просто выбрать нужный вам из списка и добавить его прямо перед экспериментальным, еще не введенным в общую спецификацию свойством и радоваться результату.

Вот, к примеру, код, который отключает автоматическую трансформацию (ресайз) текста *:

text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust: none;

* Свойство text-adjust-none есть смысл использовать для мобильных устройств, браузеры которых могут автоматически изменять размеры текста на странице, делая его более читаемым, но нанося при этом ущерб верстке и эстетике.

Сначала мы описываем свойство в общем виде — так, как будто бы оно уже есть в спецификации и поддерживается всеми браузерами, хотя пока что это еще не так, но спустя какое-то время, скорее всего, станет актуально, когда свойство будет утверждено. После этого мы добавляем то же свойство уже с различными префиксами для соответствующих браузеров.

Как видите, ничего в этом сложного совершенно нет, однако данное действие сильно «утяжеляет» код, ведь по сути мы увеличили количество байтов кода в 4-5 раз, что будет довольно заметно для сайтов со множеством подобных стилей. И сам по себе код становится менее читаемым, т. к.

от многократного повторения одного и того же начинает рябить в глазах, да и просто есть некоторое ощущение дурного тона и плохой оптимизации.

Немного уходя от темы, хочется сказать, что существует такой метод программирования, который называется ООП (объекто-ориентированное программирование). Так вот, его главная задача — сократить код, используя классы, функции и т. д.

главным образом этот метод существует для того, чтобы выполнение какого-то определенного действия в разных участках программы не требовало написания одинаковых кусков кода. В случае ООП можно просто обращаться к заранее определенному классу и его функциям.

Это упрощает работу и значительно сокращает и оптимизирует код.

Почти то же самое происходит и в случае CSS с вендорными префиксами — когда их нет, код выглядит оптимизированным под все браузеры, а когда они приходят на помощь нетерпеливым верстальщикам, которые хотят бежать впереди медленного паровоза под названием W3C, код превращается в кашу, состоящую из копированных по 5 раз одних и тех же строк, отличающихся друг от друга каким-то непонятными префиксами.

Лучше конечно избегать использования вендорных префиксов и не пытаться обогнать паровоз единой спецификации, но если существует непреодолимое желание и острая необходимость использования того или иного CSS свойста, которое пока еще не принято W3C, то использовать префиксы конечно можно, никто вас за это линейкой по рукам бить не будет. Однако, на наш взгляд, это плохой тон.

01.08.2015

2147

Возможно, вам это интересно:

Источник: http://MakeaSite.ru/vendor-prefixes.html

CSS — Префиксы браузеров

В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.

Что такое префиксы?

Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit-, -moz-, -ms- и др.

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

  • -webkit-: браузеры Chrome, Safari, Opera;
  • -moz-: браузер Mozilla Firefox;
  • -ms-: браузер Internet Explorer.

Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.

Причины появления префиксов?

Причин для появления префиксов было достаточно много:

  • Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
  • Для решения проблем с кроссбраузерностью.
  • Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.

Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.

Как использовать префиксы?

Рассмотрим в качестве примере следующий код:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.

Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

Как проверить поддержку определенного свойства в браузере?

Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.

Сайт «Can I Use…»

Например: проверим, как реализовано свойство transform в браузерах.

На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

  • Красный прямоугольник — браузер, в котором данное свойство не реализовано;
  • Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
  • Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
  • Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

Источник: https://itchief.ru/lessons/html-and-css/css-browser-prefixes

Пришло время переосмыслить вендорные префиксы в CSS

Префикс -webkit- доминирует в CSS настолько, что некоторые сайты без него работают неправильно. Это свидетельствует о следовании разработчиков не самым лучшим практикам в последние годы и это привело к неудачному, но практически вынужденному решению со стороны Mozilla.

В Firefox версии 46 или 47 (это апрель или май 2016 года), Mozilla планирует реализовать поддержку нестандартных префиксов -webkit-, чтобы улучшить совместимость Firefox с сайтами, активно использующими -webkit (как правило, это сайты, ориентированные на мобильные устройства).

Это не новая идея, Microsoft Edge уже поддерживает ряд префиксов ‘-webkit-‘ ради совместимости. Opera реализовывала эти префиксы в 2012, а затем перешла на основанный на WebKit движок Blink.

Совет

W3C и производители браузеров не планировали использование вендорных префиксов на рабочих сайтах:

Тем не менее, разработчики применяют префиксы, чтобы использовать новейшие возможности браузеров максимально быстро. Префиксы вызвали беспорядок с доминированием WebKit, но они же заставили веб двигаться вперед ускоренными темпами.

Подход Mozilla и Microsoft безопасен для большинства сайтов.

На многих сайтах будет использоваться префикс -moz- или же не потребуется никаких действий для совместимости с будущим обновлением Firefox.

Но как профессиональные веб-разработчики, мы должны тщательно рассмотреть и понять, какие последствия это повлечет. Вы наверняка знаете, какие из ваших сайтов могут пострадать от этого обновления.

Итак, пришло время переосмыслить подход к префиксам и протестировать сайты с ними.

Есть целый ряд префиксов -webkit-, которые Mozilla может реализовать. Исходя тех данных, что я собрал, Mozilla не стремится к совпадению своего списка поддерживаемых префиксных свойств со списком Edge, так как не все из них нужны для совместимости движка раскладки.

Судя по wiki-странице по совместимости, Mozilla собирается реализовать следующее:

  • -webkit-flexbox
  • -webkit- prefixed gradients
  • -webkit-transforms
  • -webkit-transitions
  • -webkit-appearance
  • -webkit-background-clip
  • -webkit-device-pixel-ratio
  • -webkit-animation
  • -webkit-border*
Читайте также:  Бинарные опционы на валютные пары

Также в список могут попасть и другие свойства, например, @-webkit-keyframes.

Если вы из тех веб-разработчиков, которые не используют префикс -moz-, чтобы избежать тестирования новейших возможностей CSS в Firefox, представьте что у вас дедлайн, клиент дергает вас за руку и вы тестируете свой сайт в Firefox 46 или 47. Эти версии выйдут уже в апреле-мае, поэтому у нас еще есть время, чтобы планировать заранее.

Чтобы протестировать сайт в этих условиях уже сейчас, вы можете использовать ночную сборку Firefox, с флагом layout.css.prefixes.webkit заданным в конфигурации (about:config) в значение true — это уже сделано по умолчанию. Не все префиксы -webkit- добавлены, но основные моменты протестировать можно. Я хотел бы подождать до марта, прежде чем тестировать ночные сборки Firefox более тщательно.

Еще одно важное замечание: Microsoft Edge уже интерпретирует и отображает префиксы -webkit- таким образом. Это значит, что специфические стили WebKit, добавленные вами на сайт, уже работают в тех браузерах, от которых вы этого не ожидаете. Если вы еще не проверяли это, запустите Microsoft Edge на Windows 10 и убедитесь сами.

Обратите внимание

К счастью, все идет к тому, что вендорные префиксы уйдут, а команды разработчиков браузеров будут искать лучшие решения. Разработчики Chrome/Blink скорректировали свой подход:

Разработчики Firefox также близки к аналогичному подходу:

Microsoft Edge также собирается отказаться от вендорных префиксов:

Этот уход от вендорных префиксов означает одну вещь — постепенная деградация с помощью вендорных префиксов не имеет перспектив.

Использование вендорных префиксов для применения стилей для конкретного браузера (например, только для Chrome) не являлось целью их введения; рекомендацией для разработчиков всегда было использование всех префиксов (от -webkit- до -o-). Если вы используете возможности, которые зависят от префиксных свойств и используете префиксы для постепенной деградации вашего дизайна в других браузерах, то это больше не работает.

Времена меняются. Доминирование WebKit невольно повлекло проблемы с несовместимостью, что заставляет производителей остальных браузеров реализовывать префиксы -webkit-. Эта проблема исчерпает себя по мере отказа производителей браузеров от вендорных префиксов, но пока разработчики должны проверять, что префиксы не вызовут неожиданных результатов в не-WebKit браузерах.

Источник: http://prgssr.ru/development/prishlo-vremya-pereosmyslit-vendornye-prefiksy-v-css.html

Обзор миксов для вендорных префиксов в COMPASS

Как известно, вендорные префиксы — это приставки к названиям CSS свойств, которые добавляют производители браузеров для поддержки нестандартных свойств. Правда некоторые CSS свойства потом признаются консорциумом W3C, а префиксы остаются.

Вот на днях столкнулась с тем, что свойства для CSS анимации в последней версии Chrome не работали без префиксов.

Сильно удивилась и в связи с этим решила выбрать все же наиболее удобный способ сокращенного написания префиксов с использованием технологий фреймворка COMPASS.

UPD. Теперь вместо всех этих mixin я использую gulp-autoprefixer для Gulp.js

1. Стандартные миксины COMPASS для CSS3 свойств

Чтобы мы не прописывали для CSS3 свойства все префиксы, разработчики COMPASS постарались и сделали стандартные mixin, которые делают это за вас. Все, что нужно, это подключить соответствующий файл:

Можно подключать отдельно для разных свойств, но на мой взгляд, это неудобно и нецелесообразно.

В итоге получаем полный набор префиксов в полученном css файле.

Плюсы: 

– кроме подключения файла с COMPASS миксами, ничего больше не нужно прописывать.

– запись самого свойства немногим отличается от стандартной, например

@include border-radius(10px);

Минусы: 

– вендорные префиксы для свойства указываются все, даже если такого префикса производители браузера не делали. Например, нет свойства -o-border-radius не существует, а в моих css файлах оно присутствует, потому что я использую компасс миксин border-radius.

2. Пользовательские миксы

2.1 Микс для прописывания префиксов в COMPASS № 1

@mixin vendor($property, $value){-webkit-#{$property}:$value;-moz-#{$property}:$value;-ms-#{$property}:$value;-o-#{$property}:$value;#{$property}:$value;}

Потом пишем где-нибудь в scss файле:

@include vendor ('border-radius', 10px);

И получаем на выходе в css файле весь набор префиксов.

Плюсы:

– если вы верстаете небольшой проект и у вас нет необходимости в использовании большого количества CSS3 свойств, то вполне можно настроить этот миксин под себя. Например, если вы используете только border-radius, то можно сократить этот миксин до такой записи:

@mixin vendor($property, $value){-webkit-#{$property}:$value;-moz-#{$property}:$value;#{$property}:$value;}

Минусы:

– нужно писать дополнительный миксин (а возможно даже несколько, зависит от ваших целей)

– сама запись не такая явная, как в варианте 1. Когда вы поддерживаете большой проект, это может стать действительно минусом.

2.2 Микс для прописывания префиксов в COMPASS № 2

Создаем массив с префиксами:

$prefixes: («-webkit-«,»-moz-«, «»);

Используем массив с префиксами:

@mixin border-radius-custom($radius) {@each $prefix in $prefixes {   #{$prefix}border-radius: $radius;}}

Плюсы:

– кастомизируйте префиксы для разных свойств сколько угодно

Минусы:

– много кода

 3. Миксин experimental для поддержки браузеров из модуля SHARED фреймворка COMPASS

Это самый удобный в больших проектах, на мой взгляд способ.

Подключаем модуль:

@import «compass/css3/shared»

А затем пишем сам миксин там, где нужно написать CSS свойство с вендорными префиксами. Например:

@include experimental('transform', translate(-2px, -1px) rotate(0.5deg), webkit, moz, o, ms, not khtml);

Это значит, что свойство transform с заданными значениями продублируется для префиксов webkit. moz, o и ms.

Ссылка на миксин на оф. сайте COMPASS

Плюсы:

– не надо писать лишний код

– можно кастомизировать любое свойство

– миксины от COMPASS писали умные люди 🙂

Минусы:

– не совсем явная запись свойства: тяжело будет поддерживать, если все CSS3 свойства так записывать

Источник: http://positivecrash.com/compass-css-vendor-prefix-mixins/

CSS vendor prefixes

CSS vendor prefixes позволяет веб-разработчикам работать с новыми стандартами. В большинстве случаев, при использовать более новых свойств CSS, нужно добавить префикс для каждого браузера.<\p>

Префиксы для браузеров

  • Android: -webkit-
  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

CSS vendor prefixes — модель использования префиксов

Для доступа к свойствам CSS с поставщиком префиксов браузера, используйте код:

var elm = document.getElementById(«myElement»); elm.style.msTransitionProperty = «all»; elm.style.msTransitionDuration = «3s»; elm.style.msTransitionDelay = «0s»; elm.style.webkitTransitionProperty = «all»; elm.style.webkitTransitionDuration = «3s»; elm.style.webkitTransitionDelay = «0s»; elm.style.MozTransitionProperty = «all»; elm.style.MozTransitionDuration = «3s»; elm.style.MozTransitionDelay = «0s»; elm.style.OTransitionProperty = «all»; elm.style.OTransitionDuration = «3s»; elm.style.OTransitionDelay = «0s»;

не думайте, что браузер определит префикс и будет работать точно так же, как со стандартными свойствами. Например, чтобы создать CSS градиент можно использовать  linear-gradient .

Firefox, Opera и современные версии Chrome и Safari используют это свойство с соответствующий префиксом. Но ранние версии Chrome и Safari используют префикс -webkit-gradient .

Кроме того, Firefox использует различные значения, стандартов.

Определить метод из списка свойств и ввернуть свойство или нулевое значение, если браузер не поддерживает ни одного свойства CSS.

function FirstSupportedFunctionName(property, prefixedFunctionNames, argString) { var tempDiv = document.createElement(«div»); for (var i = 0; i < prefixedFunctionNames.length; ++i) { tempDiv.style[property] = prefixedFunctionNames[i] + argString; if (tempDiv.style[property] != "") return prefixedFunctionNames[i]; } return null; } var linearGradientName = FirstSupportedFunctionName("backgroundImage", ["-ms-linear-gradient", "-moz-linear-gradient", "-webkit-linear-gradient", "-o-linear-gradient"], "(top, black, white)"); var radialGradientName = FirstSupportedFunctionName("backgroundImage", ["-ms-radial-gradient", "-moz-radial-gradient", "-webkit-radial-gradient", "-o-radial-gradient"], "(50% 50%, circle cover, black, white)");

Затем мы инициализируем переменную для каждого поставщика префиксов которые мы используем, передавая ему массив возможных свойств в порядке, как нам угодно.

var transformName = FirstSupportedPropertyName([«transform», «msTransform», «MozTransform», «WebkitTransform», «OTransform»]); var backfaceVisibilityName = FirstSupportedPropertyName([«backfaceVisibility», «msBackfaceVisibility», «MozBackfaceVisibility», «WebkitBackfaceVisibility», «OBackfaceVisibility»]); var transitionName = FirstSupportedPropertyName([«transition», «msTransition», «MozTransition», «WebkitTransition», «OTransition»]); var animationName = FirstSupportedPropertyName([«animation», «msAnimation», «MozAnimation», «WebkitAnimation», «OAnimation»]); var gridName = FirstSupportedPropertyName([«gridRow», «msGridRow», «MozGridRow», «WebkitGridRow», «OGridRow»]); var regionsName = FirstSupportedPropertyName([«flowFrom», «msFlowFrom», «MozFlowFrom», «WebkitFlowFrom», «OFlowFrom»]); var hyphensName = FirstSupportedPropertyName([«hyphens», «msHyphens», «MozHyphens», «WebkitHyphens», «OHyphens»]); var columnName = FirstSupportedPropertyName([«columnCount», «msColumnCount», «MozColumnCount», «WebkitColumnCount», «OColumnCount»]);

На своем сайте вставляем скрипт, который использует эти свойства:

var elm = document.getElementById(«myElement»); if (transitionName) { elm.style[transitionName + «Property»] = «all»; elm.style[transitionName + «Duration»] = «3s»; elm.style[transitionName + «Delay»] = «0s»;
} else { // fallback for browsers without CSS3 transitions }

функция обнаружения

Обратите внимание на функцию обнаружение для FirstSupportedPropertyName.

Эта модель также работает со свойствами CSS поставщика префиксов. Вы можете использовать несколько иную картину в тех случаях, когда нужен например linear-gradient :

function FirstSupportedFunctionName(property, prefixedFunctionNames, argString) { var tempDiv = document.createElement(«div»); for (var i = 0; i < prefixedFunctionNames.length; ++i) { tempDiv.style[property] = prefixedFunctionNames[i] + argString; if (tempDiv.style[property] != "") return prefixedFunctionNames[i]; } return null; } var linearGradientName = FirstSupportedFunctionName("backgroundImage", ["-ms-linear-gradient", "-moz-linear-gradient", "-webkit-linear-gradient", "-o-linear-gradient"], "(top, black, white)"); var radialGradientName = FirstSupportedFunctionName("backgroundImage", ["-ms-radial-gradient", "-moz-radial-gradient", "-webkit-radial-gradient", "-o-radial-gradient"], "(50% 50%, circle cover, black, white)");

В записи CSS3 text-shadow (тень для текста) есть функция обнаружения для text-shadow .

Заключение

В этой статье вы узнали как работает CSS vendor prefixes который позволяет веб-разработчикам работать с новыми стандартами. При использовании поставщика префиксов, убедитесь, что на вашем сайте префиксы работают правильно, на всех ожидаемых браузерах.

Источник: http://www.pixelcom.crimea.ua/css-vendor-prefixes.html

Кроссбраузерная адаптивная верстка html css

На сегодняшний день существует большое количество разных браузеров и устройств, при помощи которых посетитель просматривает сайты. Проблема в том, что в них один и тот же сайт может отображаться по-разному. 

Основные браузеры

Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.

Одно и то же свойство CSS может поддерживаться одним браузером и не работать в другом, особенно это касается новейшей спецификации. Для того, чтобы узнать, какие свойства CSS можно использовать уже сегодня, воспользуйтесь сервисом caniuse.

Читайте также:  Как изменить размер картинки в html

Вендорные префиксы

Часто разработчики топовых браузеров внедряют новые свойства css, которые еще не стандартизированы. Эти свойства предваряются специальными приставками, которые называются «вендорные префиксы». Каждый браузер имеет свой префикс:

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузера Mozilla
  • -ms — префикс для Internet Explorer
  • -webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome

Пример с вендорными префиксами:

         -webkit-transition-duration:0.6s;                        -moz-transition-duration:0.6s;            -o-transition-duration:0.6s;          -ms-transition-duration:0.6s;

         transition-duration:0.6s;

Вначале пишутся экспериментальные свойства, а затем – свойство без префикса.

Стандартные стили браузера

Разные браузеры имеют разные настройки стилей по умолчанию для каждого элемента HTML. То есть, размеры шрифтов и отступы между элементами могут варьироваться в зависимости от браузера.  Если верстальщик не переопределит такое свойство в своем файле стилей, браузер применит свои настройки. И тогда верстка вполне может «поплыть».

Чтобы это не произошло и код Вашего сайта был максимально кроссбраузерным, можно использовать специальные технологии по обнулению тех стилей, которые содержатся в браузере по умолчанию.  Для этого разработаны технологии reset.css и normalize.css. Рассмотрим их подробно.

reset.css

Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.

Недостатком этого подхода является то, что разработчику приходится прописывать заново стили и отступы абсолютно для всех элементов, что может замедлить разработку.

normalize.css

Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация.

То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.

css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.

Этот css-документ использует популярный фреймворк Bootstrap.

Оба файла – reset.css  и normalize.css распространяются бесплатно.

 Эти нехитрые приемы позволят Вам писать качественный и кроссбраузерный код, который будет одинаково хорошо отображаться в основных браузерах.

Источник: https://redline.by/novosti/krossbrauzernyij-kod.html

Префиксы. Зачем и как правильно

Вадим Макеев Веб-евангелист из Opera Software, руководитель и редактор проекта Веб-стандарты, автор блога о технологиях Пепелсбей.net. Организатор конференций РИТ и Web Standards Days, докладчик и активный участник многих других.

Автор идеи проекта Zen Coding и движка для презентаций Shower.

Вадим Макеев: Добрый день! Я работаю в компании Opera Software, мы делаем разные браузеры.

В своем докладе я буду не рекламировать какие-то крутые новинки, а расскажу о технологиях, которые мы используем повседневно. Поговорим о префиксах.

Префиксы используют все, но даже самые опытные специалисты порой не до конца понимают, как они работают. Для того, чтобы писать их правильно, нужно знать некоторые простые вещи, которые иногда оказываются совсем не простыми. Именно поэтому я расскажу вам о том, как это все работает.

Что может быть проще стула? Если в реальной жизни нам нужен стул, требуется одно простое действие – взять и поставить его. Но многие из вас пишут код, и вы периодически замечали, что некоторые свойства приходится повторять.

Важно

Если у вас есть свойство «стул», вам нужно написать «-о-стул», чтобы все это нормально отобразилось в Opera. Потом вам понадобится «-ms-стул», «-moz-стул» и «-webkit-стул». Получается нагромождение, и совершенно непонятно, что с ним делать.

И сесть на такой «стул» нельзя, и переносить неудобно.

Если вы каждый день сталкиваетесь с префиксами, то, честно говоря, они портят вам жизнь. 99 % людей мечтает, чтобы они исчезли и никогда не появлялись. Отчасти они правы, отчасти нет. Я объясню, почему.

Что собой представляют префиксы? Префикс, как правило, ставится перед значимым элементом и указывает на определенный браузер или производителя какой-либо техники. Префиксов существует очень много.

Они могут начинаться как с дефиса, так и с нижнего подчеркивания. Префиксы – появились не в CSS 3, где они используются для таких вещей как градиент или “border-radius”, а еще в CSS 2.1.

Это один из способов расширить CSS, добавляя туда собственные свойства, которые впоследствии можно стандартизировать.

На самом деле префиксы не «засоряют код». Изначально они были придуманы для того, чтобы помогать разработчикам браузеров адаптировать спецификацию под свои нужды и писать в них какие-то новые вещи. В итоги префиксы в большей степени стали использовать разработчики. Именно в этом кроется проблема.

Кстати, правильно называть префиксы именно «браузерными», а не «вендорными». В русском языке у слова «вендор» очень широкое значение. «Вендором», например, может быть и компания-поставщик холодильников. «Браузерный префикс» — это более удачный перевод.

Откуда вообще берутся префиксы? Давайте представим такую историю…

Источник: http://profyclub.ru/docs/284

Лекция 7 Некоторые возможности CSS3. Браузерные префиксы Браузерные (вендорные) префиксы это приставки к названию CSS свойства, которые добавляют производители. — презентация

1 Лекция 7 Некоторые возможности CSS3<\p>

2 Браузерные префиксы Браузерные (вендорные) префиксы это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.<\p>

3 Наиболее распространённые браузерные префиксы<\p>

4 Стандартное свойство должно ставиться последним! E { -webkit-box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000; }<\p>

5 Градиент Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background.<\p>

Совет

6 Градиент В самом простом случае с двумя цветами вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет. Нулю градусов (или 360º) соответствует горизонтальный градиент слева направо, далее отсчёт ведётся против часовой стрелки.<\p>

7 Некоторые градиенты<\p>

8 Позиционирование цветов градиента Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Ещё один пример: background: linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);<\p>

9 Радиальный градиент Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. Рис. 1. Радиальный и линейный градиент<\p>

10 Пример Начальную точку градиента можно задавать в любом месте элемента, для этого вначале указывается её позиция.<\p>

11 Круговой и эллиптический градиент Возможны две формы радиального градиента круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент. а. круговой градиент (значение circle, слева) б. эллиптический градиент (значение ellipse, справа)<\p>

12 Тень Для добавления тени для блочного элемента используется свойство box- shadow, у которого имеется шесть значений, из них только два являются обязательными.<\p>

13 Значения box-shadow 1.ключевое слово inset устанавливает тень внутри элемента; 2.сдвиг тени по горизонтали (5px вправо, -5px влево); 3.сдвиг по вертикали (5px вниз, -5px вверх); 4.радиус размытия тени (0 резкая тень); 5.растяжение тени (5px растяжение, -5px сжатие); 6.цвет тени. Следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию.<\p>

14 Значения теней КодРезультатОписание box-shadow: 5px 5px;Резкая тень справа и снизу. box-shadow: -5px -5px;Резкая тень слева и сверху. box-shadow: 0 0 5px;Размытая тень вокруг элемента. box-shadow: 0 0 5px 2px;Расширение тени на 2 пиксела. box-shadow: 0 0 5px 2px red; Красное свечение вокруг элемента. box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); Полупрозрачная тень. box-shadow: inset 0 0 6px; Тень внутри.<\p>

Обратите внимание

15 Тень для текста Синтаксис: text-shadow: none | тень [,тень]* где тень: none Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x, сдвиг по y Смещение тени по горизонтали (по вертикали) относительно текста. Обязательные параметры. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. По-умолчанию: 0<\p>

16 Скруглённые уголки (свойство border-radius) Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. Синтаксис: border-radius: {1,4} [ / {1,4}]<\p>

17 Значения border-radius<\p>

18 Эллиптические уголки В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком. Рис. 1. Радиус скругления для создания разных типов уголков<\p>

19 Другие свойства скруглённых уголков border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius<\p>

20 Ссылки по теме<\p>

Источник: http://www.myshared.ru/slide/767389/

Ссылка на основную публикацию