Каскадные таблицы стилей ( CSS ) — это язык таблиц стилей, используемый для указания представления и стиля документа, написанного на языке разметки , таком как HTML или XML (включая диалекты XML, такие как SVG , MathML или XHTML ). [1] CSS — это краеугольная технология Всемирной паутины , наряду с HTML и JavaScript . [2]
CSS разработан для обеспечения разделения контента и представления , включая макет , цвета и шрифты . [3] Такое разделение может улучшить доступность контента , поскольку контент может быть написан без учета его представления; обеспечить большую гибкость и контроль при определении характеристик представления; позволить нескольким веб-страницам совместно использовать форматирование, указав соответствующий CSS в отдельном файле .css, что снижает сложность и повторение в структурном контенте; и позволить кэшировать файл .css для повышения скорости загрузки страницы между страницами, которые совместно используют файл и его форматирование.
Разделение форматирования и контента также позволяет представлять одну и ту же страницу разметки в разных стилях для разных методов рендеринга, например, на экране, в печати, голосом (через речевой браузер или экранный диктор ) и на тактильных устройствах на основе шрифта Брайля . CSS также имеет правила для альтернативного форматирования, если доступ к контенту осуществляется на мобильном устройстве . [4]
Название каскадирование происходит от указанной схемы приоритетов для определения того, какое объявление применяется, если более одного объявления свойства соответствует определенному элементу. Эта каскадная схема приоритетов предсказуема.
Спецификации CSS поддерживаются Консорциумом Всемирной паутины (W3C). Тип носителя Интернета ( тип MIME ) text/cssзарегистрирован для использования с CSS в RFC 2318 (март 1998 г.). W3C управляет бесплатной службой проверки CSS для документов CSS. [5]
Помимо HTML, другие языки разметки поддерживают использование CSS, включая XHTML , простой XML , SVG и XUL . CSS также используется в наборе виджетов GTK .
CSS имеет простой синтаксис и использует ряд ключевых слов на английском языке для указания имен различных свойств стиля.
Таблица стилей состоит из списка правил . Каждое правило или набор правил состоит из одного или нескольких селекторов и блока объявлений .
В CSS селекторы объявляют, к какой части разметки применяется стиль, путем сопоставления тегов и атрибутов в самой разметке.
Селекторы могут применяться к следующему:
#id.classname(фраза «класс CSS», хотя иногда и используется, является неправильным названием, поскольку классы элементов, указанные с помощью атрибута HTML class , представляют собой функцию разметки, которая отличается от подсистемы CSS браузеров, а соответствующие стандарты W3C/WHATWG работают со стилями документов; см. RDF и микроформаты для получения информации о происхождении системы «классов» модели веб-контента)Классы и идентификаторы чувствительны к регистру, начинаются с букв и могут включать буквенно-цифровые символы, дефисы и подчеркивания. Класс может применяться к любому количеству экземпляров любого элемента. Идентификатор может применяться только к одному элементу.
Псевдоклассы используются в селекторах CSS для обеспечения форматирования на основе информации, которая не содержится в дереве документа.
Одним из примеров широко используемого псевдокласса является , который идентифицирует содержимое только тогда, когда пользователь «указывает» на видимый элемент, обычно удерживая над ним курсор мыши. Он добавляется к селектору, как в или . :hovera:hover#elementid:hover
Псевдокласс классифицирует элементы документа, такие как или , тогда как псевдоэлемент делает выборку, которая может состоять из частичных элементов, таких как или . [6] Обратите внимание на различие между нотацией с двойным двоеточием, используемой для псевдоэлементов, и нотацией с одним двоеточием, используемой для псевдоклассов.:link:visited::first-line::first-letter
Несколько простых селекторов могут быть объединены с помощью комбинаторов для указания элементов по местоположению, типу элемента, идентификатору, классу или любой их комбинации. [7] Порядок селекторов важен. Например, применяется ко всем элементам класса myClass, которые находятся внутри элементов div, тогда как применяется ко всем элементам div, которые находятся внутри элементов класса myClass. Это не следует путать с объединенными идентификаторами, такими как which, который применяется к элементам div класса myClass.div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}
В следующей таблице приведена сводка синтаксиса селектора с указанием его использования и версии CSS, в которой он был представлен. [8]
Блок объявлений состоит из пары фигурных скобок ( ), заключающих в себе список объявлений,{} разделенных точкой с запятой . [9]
Каждое объявление состоит из свойства , двоеточия ( :) и значения . Необязательные пробелы могут быть вокруг блока объявления, объявлений, двоеточий и точек с запятой для удобства чтения. [10]
Свойства указаны в стандарте CSS. Каждое свойство имеет набор возможных значений. Некоторые свойства могут влиять на любой тип элемента, а другие применяются только к определенным группам элементов. [11] [12]
Значениями могут быть ключевые слова, такие как «center» или «inherit», или числовые значения, такие как 200px(200 пикселей), 50vw(50 процентов ширины области просмотра) или 80% (80 процентов ширины родительского элемента).
Значения цвета могут быть указаны с помощью ключевых слов (например, " red"), шестнадцатеричных значений (например , также сокращенно ), значений RGB по шкале от 0 до 255 (например, ), значений RGBA, которые определяют как цвет, так и альфа-прозрачность (например , ), или значений HSL или HSLA (например , ). [13]#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(0 100% 50%)hsl(0 100% 50% / 0.8)
Ненулевые числовые значения, представляющие линейные меры, должны включать единицу длины, которая является либо буквенным кодом, либо сокращением, как в 200pxили 50vw; или знаком процента, как в 80%. Некоторые единицы – cm( сантиметр ); in( дюйм ); mm( миллиметр ); pc( пика ); и pt( точка ) – являются абсолютными , что означает, что отображаемый размер не зависит от структуры страницы; другие – em( em ); ex( ex ) и px( пиксель ) [ необходимо разъяснение ] – являются относительными , что означает, что такие факторы, как размер шрифта родительского элемента, могут влиять на отображаемое измерение. Эти восемь единиц были особенностью CSS 1 [14] и сохранялись во всех последующих редакциях. Предлагаемый модуль значений и единиц CSS уровня 3, если он будет принят в качестве Рекомендации W3C, предоставит еще семь единиц длины: ch; Q; ; rem; vh; vmax; vmin; и vw. [15]
До CSS почти все презентационные атрибуты HTML-документов содержались в HTML-разметке. Все цвета шрифтов, стили фона, выравнивание элементов, границы и размеры должны были быть явно описаны, часто многократно, в HTML. CSS позволяет авторам перемещать большую часть этой информации в другой файл, таблицу стилей, что приводит к значительному упрощению HTML. И, кроме того, поскольку все больше устройств могут получать доступ к адаптивным веб-страницам, начинают появляться различные размеры экранов и макеты. Настройка веб-сайта для каждого размера устройства является дорогостоящей и все более сложной. Модульная природа CSS означает, что стили можно повторно использовать в разных частях сайта или даже на разных сайтах, что способствует согласованности и эффективности.
Например, заголовки ( h1элементы), подзаголовки ( h2), подподзаголовки ( h3) и т. д. структурно определяются с помощью HTML. В печати и на экране выбор шрифта , размера , цвета и акцента для этих элементов является презентационным .
До появления CSS авторам документов, которые хотели присвоить такие типографические характеристики, скажем, всем h2заголовкам, приходилось повторять презентационную разметку HTML для каждого появления этого типа заголовка. Это делало документы более сложными, большими, подверженными ошибкам и сложными в обслуживании. CSS позволяет отделить представление от структуры. CSS может определять цвет, шрифт, выравнивание текста, размер, границы, интервалы, макет и многие другие типографические характеристики, и может делать это независимо для экранных и печатных представлений. CSS также определяет невизуальные стили, такие как скорость чтения и акцент для читателей текста на слух. W3C теперь не рекомендует использовать всю презентационную разметку HTML. [16]
Например, в HTML до CSS элемент заголовка, определенный красным текстом, будет записан следующим образом:
< h1 >< цвет шрифта = "red" > Глава 1. </ шрифт ></ h1 >Используя CSS, тот же элемент можно закодировать с использованием свойств стиля вместо атрибутов представления HTML:
< h1 style = "color: red;" > Глава 1. </ h1 >Преимущества этого могут быть не сразу очевидны, но сила CSS становится более очевидной, когда свойства стиля помещаются во внутренний элемент стиля или, что еще лучше, во внешний файл CSS. Например, предположим, что документ содержит элемент стиля:
< стиль > h1 { цвет : красный ; } </ стиль > Все h1элементы в документе затем автоматически станут красными без необходимости в явном коде. Если автор позже захочет сделать h1элементы синими, это можно сделать, изменив элемент style на:
< стиль > h1 { цвет : синий ; } </ стиль > вместо того, чтобы кропотливо просматривать документ и менять цвет каждого отдельного h1элемента.
Стили также можно поместить во внешний CSS-файл, как описано ниже, и загрузить с использованием следующего синтаксиса:
< ссылка href = "путь/к/файлу.css" rel = "таблица стилей" тип = "текст/css" >Это еще больше отделяет стиль от HTML-документа и позволяет изменять стиль нескольких документов, просто редактируя общий внешний CSS-файл.
CSS, или каскадные таблицы стилей, предлагает гибкий способ стилизации веб-контента со стилями, происходящими из настроек браузера по умолчанию, пользовательских настроек или веб-дизайнеров. Эти стили могут применяться встроенно, в HTML-документе или через внешние файлы .css для более широкой согласованности. Это не только упрощает веб-разработку, способствуя повторному использованию и удобству обслуживания, но и повышает производительность сайта, поскольку стили могут быть выгружены в специальные файлы .css, которые браузеры могут кэшировать. Кроме того, даже если стили не могут быть загружены или отключены, это разделение сохраняет доступность и читаемость контента, гарантируя, что сайт будет удобен для использования всеми пользователями, включая людей с ограниченными возможностями. Его многогранный подход, включая соображения о специфичности селектора, порядке правил и типах носителей, гарантирует, что веб-сайты будут визуально согласованными и адаптивными для разных устройств и потребностей пользователей, достигая баланса между замыслом дизайна и доступностью для пользователя.
Можно импортировать несколько таблиц стилей. Различные стили могут применяться в зависимости от используемого устройства вывода; например, экранная версия может существенно отличаться от печатной версии, поэтому авторы могут адаптировать презентацию соответствующим образом для каждого носителя.
Таблица стилей с наивысшим приоритетом управляет отображением контента. Декларации, не заданные в источнике с наивысшим приоритетом, передаются источнику с более низким приоритетом, например стилю пользовательского агента. Этот процесс называется каскадированием .
Одна из целей CSS — предоставить пользователям больший контроль над представлением . Тот, кому трудно читать красные курсивные заголовки, может применить другую таблицу стилей. В зависимости от браузера и веб-сайта пользователь может выбрать одну из различных таблиц стилей, предоставленных дизайнерами, или удалить все добавленные стили и просматривать сайт, используя стиль браузера по умолчанию, или переопределить только стиль красного курсива, не изменяя другие атрибуты. Расширения браузера, такие как Stylish и Stylus, были созданы для облегчения управления такими пользовательскими таблицами стилей. В случае крупных проектов каскадирование может использоваться для определения того, какой стиль имеет более высокий приоритет, когда разработчики интегрируют сторонние стили, имеющие конфликтующие приоритеты, и для дальнейшего разрешения этих конфликтов. Кроме того, каскадирование может помочь в создании тематических дизайнов, которые помогают дизайнерам точно настраивать аспекты дизайна, не нарушая общую компоновку.
Специфичность относится к относительному весу различных правил. [17] Она определяет, какие стили применяются к элементу, когда может применяться более одного правила. На основе спецификации простой селектор (например, H1) имеет специфичность 1, селекторы классов имеют специфичность 1,0, а селекторы идентификаторов имеют специфичность 1,0,0. Поскольку значения специфичности не переносятся, как в десятичной системе, для разделения «цифр» используются запятые [18] (правило CSS, имеющее 11 элементов и 11 классов, будет иметь специфичность 11,11, а не 121).
Таким образом, селекторы следующего правила приводят к указанной специфичности:
Рассмотрим этот фрагмент HTML:
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < style > # xyz { color : blue ; } </ style > </ head > < body > < p id = "xyz" style = "color: green;" > Для демонстрации специфичности </ p > </ body > </ html > В приведенном выше примере объявление в styleатрибуте переопределяет объявление в <style>элементе, поскольку оно имеет более высокую специфичность, и поэтому абзац отображается зеленым цветом:
Для демонстрации специфичности
Наследование — ключевая функция CSS; оно опирается на отношения предок-потомок для работы. Наследование — это механизм, с помощью которого свойства применяются не только к указанному элементу, но и к его потомкам. [17] Наследование опирается на дерево документа, которое представляет собой иерархию элементов XHTML на странице, основанную на вложенности. Элементы-потомки могут наследовать значения свойств CSS от любого элемента-предка, включающего их. В общем случае элементы-потомки наследуют свойства, связанные с текстом, но их свойства, связанные с блоками, не наследуются. Свойства, которые могут быть унаследованы, — это цвет, шрифт, интервал между буквами, высота строки, стиль списка, выравнивание текста, отступ текста, преобразование текста, видимость, пробел и интервал между словами. Свойства, которые не могут быть унаследованы: background, border, display, float и clear, height и width, margin, min- и max-height и -width, outline, overflow, padding, position, text-decoration, vertical-align и z-index.
Наследование можно использовать, чтобы избежать повторного объявления определенных свойств в таблице стилей, что позволяет сократить CSS.
Наследование в CSS не то же самое, что наследование в языках программирования на основе классов , где можно определить класс B как «подобный классу A, но с изменениями». [19] С помощью CSS можно стилизовать элемент с помощью «класса A, но с изменениями». Однако невозможно определить класс CSS B таким образом, который затем можно было бы использовать для стилизации нескольких элементов без необходимости повторять изменения.
Дана следующая таблица стилей:
р { цвет : розовый ; } Предположим, что есть элемент ap с подчеркивающим элементом (<em>) внутри:
< p > Это сделано для того, чтобы < em > проиллюстрировать </ em > наследование </ p >Если элементу em не назначен цвет, выделенное слово «illustrate» наследует цвет родительского элемента p. Таблица стилей p имеет розовый цвет, следовательно, элемент em также розовый:
Это для иллюстрации наследования.
Пробелы между свойствами и селекторами игнорируются. Этот фрагмент кода:
body { overflow : hidden ; background : #000000 ; background-image : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : left top ;} функционально эквивалентен этому:
body { overflow : hidden ; background-color : #000000 ; background-image : url ( images/bg.gif ); background-repeat : no-repeat ; background-position : left top ; } Один из распространенных способов форматирования CSS для удобства чтения — сделать отступ для каждого свойства и дать ему отдельную строку. Помимо форматирования CSS для удобства чтения, можно использовать сокращенные свойства для более быстрой записи кода, который также быстрее обрабатывается при рендеринге: [20]
тело { переполнение : скрыто ; фон : #000 url ( images/bg.gif ) неповторяется слева вверху ; } Иногда несколько значений свойств располагаются на отдельной строке:
@ font-face { font-family : 'Comic Sans' ; font-size : 20px ; src : url ( 'first.example.com' ), url ( 'second.example.com' ), url ( 'third.example.com' ), url ( 'fourth.example.com' ); } CSS 2.1 определяет три схемы позиционирования:
Существует пять возможных значений свойства position. Если элемент позиционирован иным образом, чем static, то для указания смещений и позиций используются дополнительные свойства top, bottom, left, и . rightЭлемент, имеющий статическую позицию, не подвержен влиянию свойств top, bottom, leftили right.
Значение по умолчанию помещает элемент в обычный поток .
Элемент помещается в нормальный поток , а затем сдвигается или смещается с этой позиции. Последующие элементы потока располагаются так, как будто элемент не был перемещен.
Задает абсолютное позиционирование . Элемент позиционируется относительно своего ближайшего нестатического предка.
Элемент абсолютно позиционируется в фиксированном положении на экране, даже если остальная часть документа прокручивается [21]
Свойство floatможет иметь одно из трех значений. Абсолютно позиционированные или фиксированные элементы не могут быть плавающими. Другие элементы обычно обтекают плавающие элементы, если только им не препятствует это делать их clearсвойство.
clear:leftclear:rightclear:both
CSS был впервые предложен Хоконом Виумом Ли 10 октября 1994 года. [23] В то время Ли работал с Тимом Бернерсом-Ли в ЦЕРНе . [24] Несколько других языков таблиц стилей для Интернета были предложены примерно в то же время, и обсуждения в публичных почтовых рассылках и внутри Консорциума Всемирной паутины привели к первой Рекомендации W3C CSS (CSS1) [25], выпущенной в 1996 году. В частности, влиятельным было предложение Берта Боса ; он стал соавтором CSS1 и считается соавтором CSS. [26]
Таблицы стилей существовали в той или иной форме с момента появления Standard Generalized Markup Language ( SGML ) в 1980-х годах, а CSS был разработан для предоставления таблиц стилей для Интернета. [27] Одним из требований к языку таблиц стилей для Интернета было то, чтобы таблицы стилей поступали из разных источников в Интернете. Поэтому существующие языки таблиц стилей, такие как DSSSL и FOSI , не подходили. CSS, с другой стороны, позволял влиянию на стиль документа нескольких таблиц стилей посредством «каскадных» стилей. [27]
По мере развития HTML он стал охватывать более широкий спектр стилистических возможностей для удовлетворения потребностей веб-разработчиков . Эта эволюция дала дизайнеру больше контроля над внешним видом сайта за счет более сложного HTML. Изменения в реализациях веб-браузеров , таких как ViolaWWW и WorldWideWeb , [28] затруднили единообразный внешний вид сайта, и пользователи имели меньше контроля над тем, как отображался веб-контент. Браузер/редактор, разработанный Тимом Бернерсом-Ли, имел таблицы стилей, которые были жестко закодированы в программе. Поэтому таблицы стилей не могли быть связаны с документами в Интернете. [24] Роберт Кайо , также из ЦЕРНа, хотел отделить структуру от представления, чтобы разные таблицы стилей могли описывать разное представление для печати, экранных презентаций и редакторов. [28]
Улучшение возможностей веб-презентации было темой, интересующей многих в веб-сообществе, и девять различных языков таблиц стилей были предложены в списке рассылки www-style. [27] Из этих девяти предложений два особенно повлияли на то, что стало CSS: каскадные таблицы стилей HTML [23] и предложение потоковых таблиц стилей (SSP). [26] [29] Два браузера служили испытательными стендами для первоначальных предложений; Ли работал с Ивом Лафоном над реализацией CSS в браузере Arena Дейва Рэггетта . [ 30] [31] [32] Берт Бос реализовал свое собственное предложение SSP в браузере Argo . [26] После этого Ли и Бос работали вместе над разработкой стандарта CSS (буква «H» была удалена из названия, поскольку эти таблицы стилей могли применяться и к другим языкам разметки, помимо HTML). [24]
Предложение Ли было представлено на конференции «Мозаика и Интернет» (позже названной WWW2) в Чикаго, штат Иллинойс, в 1994 году, и снова с Бертом Босом в 1995 году. [24] Примерно в это же время W3C уже был создан и проявил интерес к разработке CSS. Он организовал семинар с этой целью под председательством Стивена Пембертона . Это привело к тому, что W3C добавил работу над CSS к результатам работы редакционной коллегии по обзору HTML (ERB). Ли и Бос были основными техническими сотрудниками по этому аспекту проекта, а также участвовали дополнительные члены, включая Томаса Рирдона из Microsoft. В августе 1996 года Netscape Communication Corporation представила альтернативный язык таблиц стилей под названием JavaScript Style Sheets (JSSS). [24] Спецификация так и не была завершена и устарела. [33] К концу 1996 года CSS был готов стать официальным, и в декабре была опубликована Рекомендация CSS уровня 1.
Разработка HTML, CSS и DOM велась в рамках одной группы — HTML Editorial Review Board (ERB). В начале 1997 года ERB был разделен на три рабочие группы: HTML Working Group под председательством Дэна Коннолли из W3C; DOM Working group под председательством Лорен Вуд из SoftQuad ; и CSS Working Group под председательством Криса Лилли из W3C.
Рабочая группа CSS начала решать проблемы, которые не были решены в CSS уровня 1, что привело к созданию CSS уровня 2 4 ноября 1997 года. Он был опубликован в качестве Рекомендации W3C 12 мая 1998 года. CSS уровня 3, разработка которого началась в 1998 году, по состоянию на 2014 год все еще находится в стадии разработки [update].
В 2005 году рабочие группы CSS решили ужесточить требования к стандартам. Это означало, что уже опубликованные стандарты, такие как CSS 2.1, CSS 3 Selectors и CSS 3 Text, были переведены из категории Candidate Recommendation в категорию Working Draft.
Спецификация CSS 1 была завершена в 1996 году. В том же году был выпущен Internet Explorer 3 от Microsoft [24] , в котором была реализована ограниченная поддержка CSS. IE 4 и Netscape 4.x добавили больше поддержки, но она, как правило, была неполной и имела множество ошибок , которые мешали эффективному внедрению CSS. Прошло более трех лет, прежде чем какой-либо веб-браузер добился почти полной реализации спецификации. Internet Explorer 5.0 для Macintosh , выпущенный в марте 2000 года, стал первым браузером с полной (более 99 процентов) поддержкой CSS 1, [34] превзойдя Opera , которая была лидером с момента введения поддержки CSS пятнадцатью месяцами ранее. Вскоре последовали и другие браузеры, и многие из них дополнительно реализовали части CSS 2.
Однако даже когда более поздние веб-браузеры «версии 5» начали предлагать довольно полную реализацию CSS, они все еще были неверны в определенных областях. Они были полны несоответствий, ошибок и других причуд . Microsoft Internet Explorer 5. x для Windows , в отличие от совершенно другого IE для Macintosh , имел некорректную реализацию блочной модели CSS по сравнению со стандартами CSS. Такие несоответствия и различия в поддержке функций затрудняли для дизайнеров достижение единообразного внешнего вида во всех браузерах и на разных платформах без использования обходных путей , называемых CSS-хаками и фильтрами . Ошибки блочной модели IE для Windows были настолько серьезными, что, когда был выпущен Internet Explorer 6 , Microsoft представила обратно совместимый режим интерпретации CSS (« режим причуд ») наряду с альтернативным, исправленным «стандартным режимом». Другие браузеры не от Microsoft также предоставляли возможности переключения режимов. Поэтому авторам HTML- файлов стало необходимо убедиться, что они содержат специальный отличительный маркер «CSS, соответствующий стандартам», чтобы показать, что авторы хотели, чтобы CSS интерпретировался правильно, в соответствии со стандартами, а не предназначался для давно устаревшего браузера IE5/Windows . Без этого маркера веб-браузеры с возможностью переключения «quirks mode» будут изменять размер объектов на веб-страницах так же, как это делал бы IE 5 в Windows, а не следовать стандартам CSS.
Проблемы с неоднородным принятием CSS и опечатками в исходной спецификации привели к тому, что W3C пересмотрел стандарты CSS 2 в CSS 2.1, который приблизился к рабочему снимку текущей поддержки CSS в HTML-браузерах. Некоторые свойства CSS 2, которые ни один браузер не реализовал успешно, были удалены, а в нескольких случаях определенные поведения были изменены, чтобы привести стандарт в соответствие с преобладающими существующими реализациями. CSS 2.1 стал Кандидатом в рекомендации 25 февраля 2004 года, но CSS 2.1 был отозван обратно в статус Рабочего проекта 13 июня 2005 года [35] и вернулся в статус Кандидата в рекомендации только 19 июля 2007 года. [36]
В дополнение к этим проблемам, .cssрасширение использовалось программным продуктом, применяемым для преобразования файлов PowerPoint в файлы компактного слайд-шоу, [37]
поэтому некоторые веб-серверы обслуживали все .css[38] как тип MIME application/x-pointplus[39] , а не text/css.
Отдельные поставщики браузеров время от времени вводили новые параметры до стандартизации и универсализации. Чтобы не мешать будущим реализациям, поставщики добавляли уникальные имена к параметрам, например, -moz-для Mozilla Firefox , -webkit-названный в честь браузерного движка Apple Safari , -o-для Opera Browser и -ms-для Microsoft Internet Explorer и ранних версий Microsoft Edge , которые используют EdgeHTML.
Иногда параметры с префиксами поставщика, такими как -moz-radial-gradientи , -webkit-linear-gradientимеют немного другой синтаксис по сравнению с их аналогами без префиксов поставщика. [40]
Префиксные свойства устаревают к моменту стандартизации. Существуют программы для автоматического добавления префиксов для старых браузеров и указания стандартизированных версий префиксных параметров. Поскольку префиксы ограничены небольшим подмножеством браузеров, удаление префикса позволяет другим браузерам увидеть функциональность. Исключением являются некоторые устаревшие -webkit-префиксные свойства, которые настолько распространены и устойчивы в Интернете, что другие семейства браузеров решили поддерживать их для совместимости. [41]
CSS имеет различные уровни и профили. Каждый уровень CSS основывается на предыдущем, обычно добавляя новые функции и обычно обозначаясь [42] как CSS 1, CSS 2, CSS 3 и CSS 4. Профили обычно являются подмножеством одного или нескольких уровней CSS, созданных для конкретного устройства или пользовательского интерфейса. В настоящее время существуют профили для мобильных устройств, принтеров и телевизоров. Профили не следует путать с типами носителей, которые были добавлены в CSS 2.
Первой спецификацией CSS, ставшей официальной рекомендацией W3C, является CSS уровня 1, опубликованная 17 декабря 1996 года. Первоначальными разработчиками считаются Хокон Виум Ли и Берт Бос . [43] [44] Среди ее возможностей — поддержка
W3C больше не поддерживает Рекомендацию CSS 1. [45]
Спецификация CSS уровня 2 была разработана W3C и опубликована в качестве рекомендации в мае 1998 года. CSS 2, являющийся надмножеством CSS 1, включает в себя ряд новых возможностей, таких как абсолютное, относительное и фиксированное позиционирование элементов и z-index , концепцию типов носителей, поддержку звуковых таблиц стилей (которые позже были заменены речевыми модулями CSS 3) [46] и двунаправленного текста, а также новые свойства шрифтов, такие как тени.
W3C больше не поддерживает рекомендацию CSS 2. [47]
CSS level 2 revision 1, часто называемый «CSS 2.1», исправляет ошибки в CSS 2, удаляет плохо поддерживаемые или не полностью совместимые функции и добавляет в спецификацию уже реализованные расширения браузера. Чтобы соответствовать процессу W3C по стандартизации технических спецификаций, CSS 2.1 в течение многих лет переходил из статуса рабочего проекта в статус кандидата в рекомендации. CSS 2.1 впервые стал кандидатом в рекомендации 25 февраля 2004 года, но был возвращен в статус рабочего проекта 13 июня 2005 года для дальнейшего рассмотрения. Он вернулся в статус кандидата в рекомендации 19 июля 2007 года, а затем дважды обновлялся в 2009 году. Однако, поскольку были внесены изменения и разъяснения, он снова вернулся в статус последнего рабочего проекта 7 декабря 2010 года.
CSS 2.1 был переведен в категорию «Предлагаемые рекомендации» 12 апреля 2011 года. [48] После рассмотрения Консультативным комитетом W3C он был окончательно опубликован в качестве Рекомендации W3C 7 июня 2011 года. [49]
CSS 2.1 планировался как первая и последняя версия уровня 2, но в 2015 году началась низкоприоритетная работа над CSS 2.2.
В отличие от CSS 2, который является большой единой спецификацией, определяющей различные функции, CSS 3 разделен на несколько отдельных документов, называемых «модулями». Каждый модуль добавляет новые возможности или расширяет функции, определенные в CSS 2, сохраняя обратную совместимость. Работа над CSS уровня 3 началась примерно во время публикации исходной рекомендации CSS 2. Самые ранние черновики CSS 3 были опубликованы в июне 1999 года. [50]
Из-за модульности разные модули имеют разную стабильность и статусы. [51]
Некоторые модули имеют статус Candidate Recommendation ( CR ) и считаются умеренно стабильными. На этапе CR реализациям рекомендуется отказаться от префиксов поставщиков. [52]
Не существует единой интегрированной спецификации CSS4 [54] , поскольку спецификация разделена на множество отдельных модулей, уровень которых независим.
Модули, которые основываются на элементах CSS уровня 2, начинаются с уровня 3. Некоторые из них уже достигли уровня 4 или приближаются к уровню 5. Другие модули, которые определяют совершенно новую функциональность, например Flexbox [55], обозначены как уровень 1, а некоторые из них приближаются к уровню 2.
Рабочая группа CSS иногда публикует «снимки» — набор целых модулей и частей других черновиков, которые считаются достаточно стабильными для внедрения разработчиками браузеров. До сих пор было опубликовано пять таких документов «лучших текущих практик» в виде заметок в 2007, [56] 2010, [57] 2015, [58] 2017, [59] и 2018 годах. [60]
Поскольку эти снимки спецификаций в первую очередь предназначены для разработчиков, растет спрос на аналогичный версионный справочный документ, ориентированный на авторов, который представлял бы состояние совместимых реализаций, как это уже документировано на таких сайтах, как Can I Use... [61] и MDN Web Docs. [62] В начале 2020 года была создана группа сообщества W3C для обсуждения и определения такого ресурса. [63] Фактический тип версионирования также является предметом обсуждения, что означает, что документ после его создания может не называться «CSS4».
Каждый веб-браузер использует механизм компоновки для отображения веб-страниц, и поддержка функциональности CSS не является согласованной между ними. Поскольку браузеры не анализируют CSS идеально, было разработано несколько методов кодирования для определенных браузеров с обходными путями (обычно известными как CSS-хаки или CSS-фильтры). Внедрение новой функциональности в CSS может быть затруднено отсутствием поддержки в основных браузерах. Например, Internet Explorer не спешили добавлять поддержку многих функций CSS 3, что замедлило принятие этих функций и нанесло ущерб репутации браузера среди разработчиков. Кроме того, filterв некоторых версиях использовался фирменный синтаксис для свойства non-vendor-prefixed. [64] Чтобы обеспечить единообразный опыт для своих пользователей, веб-разработчики часто тестируют свои сайты в нескольких операционных системах, браузерах и версиях браузеров, что увеличивает время разработки и сложность. Такие инструменты, как BrowserStack, были созданы для снижения сложности обслуживания этих сред.
В дополнение к этим инструментам тестирования, многие сайты ведут списки поддержки браузерами определенных свойств CSS, включая CanIUse и MDN Web Docs . Кроме того, CSS 3 определяет запросы функций, которые предоставляют @supportsдирективу, которая позволит разработчикам нацеливаться на браузеры с поддержкой определенной функциональности непосредственно в их CSS. [65] CSS, который не поддерживается старыми браузерами, также иногда может быть исправлен с помощью JavaScript polyfills , которые представляют собой фрагменты кода JavaScript, разработанные для того, чтобы браузеры вели себя согласованно. Эти обходные пути — и необходимость поддержки резервной функциональности — могут усложнить проекты разработки, и, следовательно, компании часто определяют список версий браузеров, которые они будут и не будут поддерживать.
Поскольку веб-сайты принимают новые стандарты кода, несовместимые со старыми браузерами, эти браузеры могут быть отрезаны от доступа ко многим ресурсам в Интернете (иногда намеренно). [66] Многие из самых популярных сайтов в Интернете не только визуально ухудшаются в старых браузерах из-за плохой поддержки CSS, но и вообще не работают, во многом из-за эволюции JavaScript и других веб-технологий.
Некоторые отмеченные ограничения текущих возможностей CSS включают в себя:
Правила области действия для таких свойств, как z-index, ищут ближайший родительский элемент с атрибутом position: absolute или position: relative. Эта странная связь имеет нежелательные эффекты. Например, невозможно избежать объявления новой области действия, когда кто-то вынужден изменить позицию элемента, что не позволяет использовать желаемую область действия родительского элемента.
CSS реализует псевдоклассы, которые допускают определенную степень обратной связи с пользователем посредством условного применения альтернативных стилей. Один псевдокласс CSS, " ", является динамическим (эквивалент JavaScript "onmouseover") и имеет потенциал для неправильного использования (например, реализация всплывающих окон с приближением курсора), [67] но CSS не позволяет клиенту отключить его (нет свойства типа "disable") или ограничить его эффекты (нет значений типа "nochange" для каждого свойства).:hover
Невозможно дать имя правилу CSS, что позволило бы (например) клиентским скриптам ссылаться на правило, даже если его селектор изменится.
Стили CSS часто должны дублироваться в нескольких правилах для достижения желаемого эффекта, что приводит к дополнительному обслуживанию и требует более тщательного тестирования. Для решения этой проблемы были предложены некоторые новые функции CSS, но впоследствии от них отказались. [68] [69] Вместо этого авторы могут получить эту возможность, используя более сложные языки таблиц стилей, которые компилируются в CSS, такие как Sass , Less или Stylus .
Помимо псевдоэлемента, невозможно нацелиться на определенные диапазоны текста без необходимости использования элементов-заполнителей.:first-letter
CSS облегчает публикацию контента в различных форматах представления, настраивая стили на основе различных номинальных параметров. Эти параметры включают явные пользовательские предпочтения (такие как темы или размер шрифта), совместимость с различными веб-браузерами, тип устройства, используемого для просмотра контента (например, настольный компьютер, планшет или мобильное устройство), разрешение экрана, географическое местоположение пользователя и многие другие переменные. CSS также обеспечивает адаптивный дизайн, гарантируя, что контент динамически адаптируется к различным размерам и ориентациям экрана, улучшая доступность и пользовательский опыт в широком диапазоне сред.
При эффективном использовании CSS, с точки зрения наследования и «каскадирования», глобальная таблица стилей может использоваться для воздействия и стилизации элементов на всем сайте. Если возникает ситуация, когда стили элементов должны быть изменены или скорректированы, эти изменения могут быть сделаны путем редактирования правил в глобальной таблице стилей. До CSS такой вид обслуживания был более сложным, дорогим и длительным.
Таблица стилей, внутренняя или внешняя, определяет стиль один раз для диапазона элементов HTML, выбранных по class, типу или отношению к другим. Это гораздо эффективнее, чем повторять информацию о стиле в строке для каждого появления элемента. Внешняя таблица стилей обычно хранится в кэше браузера и, следовательно, может использоваться на нескольких страницах без перезагрузки, что еще больше сокращает передачу данных по сети.
Простым изменением одной строки можно использовать другую таблицу стилей для той же страницы. Это имеет преимущества для доступности, а также дает возможность адаптировать страницу или сайт к различным целевым устройствам. Более того, устройства, не способные понять стиль, все равно будут отображать контент.
Без CSS веб-дизайнерам обычно приходится оформлять свои страницы с помощью таких приемов, как HTML-таблицы, которые затрудняют доступ для пользователей с нарушениями зрения (см. Веб-дизайн без таблиц#Доступность ).
CSS-фреймворки — это готовые библиотеки , которые предназначены для обеспечения более простого и соответствующего стандартам оформления веб-страниц с использованием языка каскадных таблиц стилей. CSS-фреймворки включают Blueprint , Bootstrap , Foundation и Materialize. Подобно библиотекам языков программирования и сценариев, CSS-фреймворки обычно включаются в качестве внешних таблиц .css, на которые ссылаются в HTML . Они предоставляют ряд готовых вариантов для проектирования и компоновки веб-страницы. Хотя многие из этих фреймворков были опубликованы, некоторые авторы используют их в основном для быстрого прототипирования или для обучения и предпочитают «создавать вручную» CSS, который подходит для каждого опубликованного сайта, без накладных расходов на проектирование, обслуживание и загрузку, связанных с наличием множества неиспользуемых функций в стилизации сайта. [70]<head>
По мере увеличения размера ресурсов CSS, используемых в проекте, команде разработчиков часто приходится выбирать общую методологию проектирования, чтобы поддерживать их организованными. Цели — простота разработки, простота совместной работы во время разработки и производительность развернутых таблиц стилей в браузере. Популярные методологии включают OOCSS (объектно-ориентированный CSS), ACSS (атомарный CSS), CSS (органическая каскадная таблица стилей), SMACSS (масштабируемая и модульная архитектура для CSS) и BEM (блок, элемент, модификатор). [72]
является частью триады технологий, которые должны изучить все веб-разработчики: HTML для указания содержимого веб-страниц, CSS для указания представления веб-страниц и JavaScript для указания поведения веб-страниц.
Определения из Викисловаря
Медиа из Commons
Учебники из Wikibooks
Ресурсы из Викиверситета
Данные из Викиданных
Обсуждения из Meta-Wiki
Документация из MediaWiki