Атрибут align и его значения. Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие). Параметры white-space и word-wrap, управляющие разрывом строк

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

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

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

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

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

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

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

Текущий тренд в Mozilla это избегание вендорных префиксов за счет отключения не готовых свойств и использовании непрефиксной версии при достаточной стабильности. Это общая политика: в отдельных случаях возможны исключения - Борис из Mozilla

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

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

Постепенной деградации, основанной на префиксах больше не будет

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

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

Заключение

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

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

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

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

Как их отличать?

Каждый движок, на котором написан браузер, имеет свой вендорный префикс.

Рассмотрим самые популярные браузеры и их префиксы. Те которые написанны на движке WebKit, а именно Safari выше третьей версии и GoogleChrome, считывают префикс -webkit- , а Safari до третьей версии -khtml- , так как имеет в своей основе движок KHTML. Для Opera можно использовать следующие префиксы: -o-, -op-, -xv- . Firefox воспримет свойства имеющие приставку -moz- , а браузеры корпорации Microsoft те, перед которыми написано -ms- .

Как это выглядит на практике?

Рассмотрим на примере для свойства transition-duration:

Webkit- transition- duration: 0. 76s; - moz- transition- duration: 0. 76s; - o- transition- duration: 0. 76s; - ms- transition- duration: 0. 76s; transition- duration: 0. 76s;

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

Для чего это нужно?

Большинство производителей называют несколько причин, когда нужно использовать вендорные префиксы. Основные, из которых:

• Свойство, которое было написано только для конкретного браузера и не содержится в стандартном списке css.
• Свойство ещё разрабатывается или по каким-то причинам не имеет рекомендаций к использованию
• Css задаёт только часть возможностей стиля.

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

Дополнительные возможности

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

Уже сейчас для верстки своих проектов можно исключить некоторые скрипты, заменив их стилями CSS.

Так, к примеру, вышеуказанный стиль позволяет плавно изменять цвет, при наведении не используя JavaScript. Однако если попробовать обойтись без префиксов, то данный стиль в некоторых браузерах может работать не корректно или не работать вообще.

Подводя итоги

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

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

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

Разберем три вопроса:

• Генерирование свойств CSS3 с префиксами браузеров, чтобы не заниматься ими вручную.
• Соединение CSS файлов и исключение комментариев и избыточных пробелов, чтобы уменьшить количество запросов к серверу и сократить время загрузки страницы.
• Выполнение выше указанных процессов при запросе страницы.

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

В CSS файле вместо префиксов используется подчеркивание:

Border-radius: 10px;

Код скрипта сгенерирует полный список свойств с префиксами:

O-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

Одним тегом link загружается сразу три CSS файла. Скрипт css.php читает перечисленные файлы (css_file1.css , css_file2.css , and css_file3.css), комбинирует их и возвращает один единый файл.

Теперь посмотрим, как устроен скрипт.

Пишем код

Создаем файл css.php со следующим кодом:

Скрипт сначала получает список CSS файлов для обработки в виде строки из параметра URL (доступного в PHP как $_GET["f"]). Каждый файл отделен вертикальной чертой. Функция explode() разделяет строку по символу вертикальной черты и возвращает массив имен файлов.

Функция file_get_contents() получает содержание каждого файла, одного за другим, и мы добавляем его в переменную $contents .

После того как содержание CSS файлов было получено, начинается поиск свойств, которые начинаются с подчеркивания, которое заменяется на префикс браузера. Функция preg_match_all() находит в тексте все части, которые соответствуют регулярному выражению, и помещает их как массив в $matches .

Рисунок описывает шаблон для регулярного выражения:

Массив $prefixes содержит префиксы браузеров. Вы может добавить или удалить то, что нужно. Каждое свойство в $matches wбудет трансформировано в набор свойств CSS3 с префиксами браузеров. Код обрабатывает каждое свойство и создает буфер результата, заменяя подчеркивание в свойстве на очередной префикс, а затем заменяя оригинальное свойство содержанием буфера.

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

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

Свойства, которые соответствуют регулярному выражению будут сильно сжиматься:

Результат в переменной $contents является готовым к отправке CSS файлом. Первый вызов функции header() информирует браузер о том, что передаваемую информацию надо воспринимать как CSS файл. Второй вызов функции header() указывает браузеру, что файл действует в течении часа, чтобы браузер поместил копию в свой кэш и не запрашивал файл повторно с сервера.

Использование скрипта

Приведем простой пример использования нашего скрипта. Поместим файл css.php в каталог css вашего проекта вместе с тремя CSS файлами.

Первый файл header.css:

#header { width: 800px; height: 100px; padding: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; background: _linear-gradient(#D30000, #3D0000); }

The second file is center.css:

#center { width: 800px; height: 400px; padding: 20px; margin: 20px 0px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; background: _linear-gradient(#8ED300, #213D00); }

The third file is footer.css:

#footer { width: 800px; height: 100px; padding: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; background: _linear-gradient(#006ED3, #00203D); }

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

Теперь создаем файл index.html , который использует данные стили.

Обратите внимание на атрибут href в теге link . Каждый файл CSS отдлен вертикальной чертой.

Заключение

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