Каскадные таблицы стилей ( CSS ) — это язык таблиц стилей , используемый для определения представления и стиля документа, написанного на языке разметки, таком как HTML или XML (включая диалекты XML, такие как SVG , MathML или XHTML ). [1] CSS — это краеугольная технология Всемирной паутины , наряду с HTML и JavaScript . [2]
CSS предназначен для разделения контента и представления , включая макет , цвета и шрифты . [3] Такое разделение может улучшить доступность контента ; [ необходимы дополнительные пояснения ] обеспечивают большую гибкость и контроль при определении характеристик представления; разрешить нескольким веб-страницам совместное форматирование, указав соответствующий CSS в отдельном файле .css, что снижает сложность и повторение структурного содержимого; и включите кэширование файла .css, чтобы повысить скорость загрузки страниц между страницами, которые совместно используют файл и его форматирование.
Разделение форматирования и контента также позволяет представить одну и ту же страницу разметки в разных стилях для разных методов рендеринга, например, на экране, в печати, с помощью голоса (через речевой браузер или программу чтения с экрана ) и на основе Брайля. тактильные устройства. CSS также имеет правила для альтернативного форматирования, если доступ к контенту осуществляется на мобильном устройстве . [4]
Каскадирование имен происходит из указанной схемы приоритетов, чтобы определить, какое объявление применяется, если определенному элементу соответствует более одного объявления свойства. Эта каскадная схема приоритетов предсказуема.
Спецификации CSS поддерживаются Консорциумом World Wide Web (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 , являются функцией разметки). это отличается от подсистемы CSS браузеров и соответствующих стандартов W3C/WHATWG, работающих со стилями документов; см. RDF и микроформаты , чтобы узнать о происхождении системы «классов» модели веб-контента)Классы и идентификаторы чувствительны к регистру, начинаются с букв и могут включать буквенно-цифровые символы, дефисы и символы подчеркивания. Класс может применяться к любому количеству экземпляров любого элемента. Идентификатор может быть применен только к одному элементу.
Псевдоклассы используются в селекторах CSS для разрешения форматирования на основе информации, которая не содержится в дереве документа.
Одним из примеров широко используемого псевдокласса является , который идентифицирует контент только тогда, когда пользователь «указывает» на видимый элемент, обычно удерживая над ним курсор мыши. Он добавляется к селектору, как в or . :hovera:hover#elementid:hover
Псевдокласс классифицирует элементы документа, такие как или , тогда как псевдоэлемент делает выборку, которая может состоять из частичных элементов, таких как или . [6] Обратите внимание на различие между обозначением двойного двоеточия, используемым для псевдоэлементов, и обозначением одинарного двоеточия, используемым для псевдоклассов.:link:visited::first-line::first-letter
Несколько простых селекторов можно объединить с помощью комбинаторов для указания элементов по местоположению, типу элемента, идентификатору, классу или любой их комбинации. [7] Порядок селекторов важен. Например, применяется ко всем элементам класса myClass, которые находятся внутри элементов div, тогда как применяется ко всем элементам div, которые находятся внутри элементов класса myClass. Это не следует путать с объединенными идентификаторами, например, которые применяются к элементам 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(000, 100%, 50%)hsla(000, 100%, 50%, 80%)
Ненулевые числовые значения, представляющие линейные меры, должны включать единицу длины, которая представляет собой буквенный код или аббревиатуру, например 200pxили 50vw; или знак процента, например 80%. Некоторые единицы – cm( сантиметр ); in( дюйм ); mm( миллиметр ); pc( пика ); и pt( точка ) – являются абсолютными , что означает, что визуализируемый размер не зависит от структуры страницы; другие – em( эм ); ex( ex ) и px( pixel ) [ необходимо уточнение ] — являются относительными , что означает, что такие факторы, как размер шрифта родительского элемента, могут повлиять на отображаемое измерение. Эти восемь модулей были особенностью 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 >< font color = "red" > Глава 1. </ Font >/ h1 >Используя CSS, один и тот же элемент можно закодировать с использованием свойств стиля вместо атрибутов представления HTML:
< h1 style = "цвет: красный;" > Глава 1. </ h1 >Преимущества этого могут быть неочевидны, но мощь CSS становится более очевидной, когда свойства стиля помещаются во внутренний элемент стиля или, что еще лучше, во внешний файл CSS. Например, предположим, что документ содержит элемент стиля:
< стиль > h1 { цвет : красный ; } </ стиль > Все h1элементы в документе автоматически станут красными без необходимости какого-либо явного кода. Если позже автор захотел сделать h1элементы синими, это можно было сделать, изменив элемент стиля на:
< стиль > h1 { цвет : синий ; } </ стиль > вместо того, чтобы кропотливо просматривать документ и менять цвет для каждого отдельного h1элемента.
Стили также можно поместить во внешний файл CSS, как описано ниже, и загрузить, используя синтаксис, аналогичный следующему:
< link href = "path/to/file.css" rel = "таблица стилей" type = "text/css" >Это дополнительно отделяет стиль от документа HTML и позволяет изменять стиль нескольких документов, просто редактируя общий внешний файл CSS.
CSS, или каскадные таблицы стилей, предлагают гибкий способ стилизации веб-контента, используя стили, основанные на настройках браузера по умолчанию, предпочтениях пользователя или веб-дизайнеров. Эти стили можно применять внутри, в документе HTML или через внешние файлы .css для большей согласованности. Это не только упрощает веб-разработку, обеспечивая возможность повторного использования и обслуживания, но также повышает производительность сайта, поскольку стили можно выгружать в специальные файлы .css, которые браузеры могут кэшировать. Кроме того, даже если стили не могут быть загружены или отключены, такое разделение сохраняет доступность и читаемость контента, гарантируя, что сайт будет удобен для использования всеми пользователями, включая людей с ограниченными возможностями. Его многогранный подход, включающий учет специфики селектора, порядка правил и типов мультимедиа, гарантирует, что веб-сайты визуально согласованы и адаптируются к различным устройствам и потребностям пользователей, обеспечивая баланс между замыслом дизайна и доступностью для пользователей.
Можно импортировать несколько таблиц стилей. В зависимости от используемого устройства вывода можно применять разные стили; например, экранная версия может сильно отличаться от печатной версии, поэтому авторы могут адаптировать презентацию соответствующим образом для каждого носителя.
Таблица стилей с наивысшим приоритетом управляет отображением контента. Объявления, не установленные в источнике с наивысшим приоритетом, передаются в источник с более низким приоритетом, например в стиль пользовательского агента. Этот процесс называется каскадированием .
Одна из целей CSS — предоставить пользователям больший контроль над представлением . Тот, кому трудно читать заголовки, выделенные красным курсивом, может применить другую таблицу стилей. В зависимости от браузера и веб-сайта пользователь может выбирать из различных таблиц стилей, предоставленных дизайнерами, или может удалить все добавленные стили и просматривать сайт, используя стиль браузера по умолчанию, или может переопределить только стиль заголовка, выделенный красным курсивом, не изменяя другие стили. атрибуты. Расширения браузера, такие как Stylish и Stylus , были созданы для облегчения управления такими пользовательскими таблицами стилей. В случае крупных проектов каскадирование можно использовать для определения того, какой стиль имеет более высокий приоритет, когда разработчики интегрируют сторонние стили с конфликтующими приоритетами, а также для дальнейшего разрешения этих конфликтов. Кроме того, каскадирование помогает создавать тематические дизайны, что помогает дизайнерам точно настраивать аспекты дизайна без ущерба для общего макета.
Специфичность относится к относительному весу различных правил. [17] Он определяет, какие стили применяются к элементу, когда может применяться более одного правила. Согласно спецификации простой селектор (например, H1) имеет специфичность 1, селекторы классов имеют специфичность 1,0, а селекторы ID имеют специфичность 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 от любого элемента-предка, включающего их. Как правило, элементы-потомки наследуют свойства, связанные с текстом, но их свойства, связанные с блоком, не наследуются. Свойства, которые могут быть унаследованы, — это цвет, шрифт, межбуквенный интервал, высота строки, стиль списка, выравнивание текста, отступ текста, преобразование текста, видимость, пробелы и межсловный интервал. Свойства, которые не могут быть унаследованы: фон, граница, отображение, плавание и очистка, высота и ширина, поля, минимальная и максимальная высота и ширина, контур, переполнение, отступ, позиция, украшение текста, вертикальное выравнивание и z-индекс.
Наследование можно использовать, чтобы избежать повторного объявления определенных свойств в таблице стилей, что позволяет сократить CSS.
Наследование в CSS — это не то же самое, что наследование в языках программирования на основе классов , где можно определить класс B как «похожий на класс A, но с модификациями». [19] С помощью CSS можно стилизовать элемент как «класс А, но с изменениями». Однако невозможно определить такой класс CSS B, который затем можно было бы использовать для стилизации нескольких элементов без повторения изменений.
Учитывая следующую таблицу стилей:
п { цвет : розовый ; } Предположим, есть элемент ap с подчеркивающим элементом (<em>) внутри:
< p > Это сделано для того, чтобы < em > проиллюстрировать < / em > наследование </p>Если элементу em не назначен цвет, выделенное слово «иллюстрировать» наследует цвет родительского элемента, p. Таблица стилей p имеет розовый цвет, следовательно, элемент em также розового цвета:
Это для иллюстрации наследования
Пробел между свойствами и селекторами игнорируется. Этот фрагмент кода:
тело { переполнение : скрыто ; фон : #000000 ; фоновое изображение : URL ( изображения/bg.gif ); фоновый повтор : без повтора ; фоновая позиция : слева вверху ;} функционально эквивалентен этому:
тело { переполнение : скрыто ; цвет фона : #000000 ; фоновое изображение : URL ( изображения/bg.gif ); фоновый повтор : без повтора ; фоновая позиция : слева вверху ; } Один из распространенных способов отформатировать CSS для удобства чтения — сделать отступ для каждого свойства и выделить ему отдельную строку. Помимо форматирования CSS для удобства чтения, можно использовать сокращенные свойства для более быстрой записи кода, который также быстрее обрабатывается при рендеринге: [20]
тело { переполнение : скрыто ; фон : #000 URL ( изображения/bg.gif ) без повтора слева вверху ; } Иногда несколько значений свойств выделяются на отдельной строке:
@ font-face { семейство шрифтов : 'Comic Sans' ; размер шрифта : 20 пикселей ; src : url ( 'first.example.com' ), url ( 'второй.example.com' ), url ( ' Third.example.com' ), url ( 'fourth.example.com' ); } CSS 2.1 определяет три схемы позиционирования:
Существует пять возможных значений свойства position. Если элемент позиционируется каким-либо образом static, кроме , то дополнительные свойства top, bottom, leftи используются для указания смещений и позиций. На элемент, имеющий статическую позицию , rightне влияют свойства top, или .bottomleftright
Значение по умолчанию помещает элемент в обычный поток .
Элемент помещается в обычный поток , а затем сдвигается или смещается от этой позиции. Последующие элементы потока располагаются так, как если бы элемент не был перемещен.
Определяет абсолютное позиционирование . Элемент позиционируется относительно своего ближайшего нестатического предка.
Элемент абсолютно позиционируется в фиксированном положении на экране, даже когда остальная часть документа прокручивается [21]
Свойство floatможет иметь одно из трех значений. Абсолютно позиционированные или фиксированные элементы не могут быть плавающими. Другие элементы обычно обтекают плавающие элементы, если только их свойство не препятствует этому clear.
clear:leftclear:rightclear:both
CSS был впервые предложен Хоконом Виумом Ли 10 октября 1994 года. [23] В то время Ли работал с Тимом Бернерсом-Ли в ЦЕРНе . [24] Примерно в то же время было предложено несколько других языков таблиц стилей для Интернета, а дискуссии в публичных списках рассылки и внутри Консорциума Всемирной паутины привели к тому, что в 1996 году была выпущена первая Рекомендация W3C по CSS (CSS1) [25] . В частности, , предложение Берта Боса оказало влияние; он стал соавтором CSS1 и считается соавтором CSS. [26]
Таблицы стилей существовали в той или иной форме с момента появления стандартного обобщенного языка разметки ( 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 (JSSS). [24] Спецификация так и не была завершена и считается устаревшей. [33] К концу 1996 года CSS был готов стать официальным, и в декабре была опубликована Рекомендация CSS уровня 1.
Разработка HTML, CSS и DOM велась в одной группе — Редакционном совете HTML (ERB). В начале 1997 года ERB было разделено на три рабочие группы: Рабочая группа HTML под председательством Дэна Коннолли из W3C; Рабочая группа DOM под председательством Лорен Вуд из SoftQuad ; и Рабочая группа CSS под председательством Криса Лилли из W3C.
Рабочая группа CSS начала решать проблемы, которые не были решены в CSS уровня 1, что привело к созданию CSS уровня 2 4 ноября 1997 года. Он был опубликован как Рекомендация W3C 12 мая 1998 года. CSS уровня 3, который был запущен в 1998 году, по состоянию на 2014 год все еще находится в стадии разработки [обновлять].
В 2005 году рабочие группы CSS решили более строго обеспечить соблюдение требований стандартов. Это означало, что уже опубликованные стандарты, такие как CSS 2.1, CSS 3 Selectors и CSS 3 Text, были перенесены с уровня «Кандидатная рекомендация» на уровень «Рабочий проект».
Спецификация CSS 1 была завершена в 1996 году. В том же году был выпущен Microsoft Internet Explorer 3 [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 (« режим причуд ») наряду с альтернативным исправленным «режимом стандартов». Другие браузеры сторонних производителей также предоставляют возможность переключения режимов. Таким образом, авторам HTML- файлов стало необходимо убедиться, что они содержат специальный отличительный маркер «предназначенный для CSS, соответствующий стандартам», чтобы показать, что авторы намеревались правильно интерпретировать CSS в соответствии со стандартами, а не для того, чтобы он был предназначен для настоящего времени. давно устаревший браузер IE5/Windows . Без этого маркера веб-браузеры с возможностью переключения «режимов совместимости» будут определять размеры объектов на веб-страницах так же, как 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 , а также -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 1, CSS 2, включает в себя ряд новых возможностей, таких как абсолютное, относительное и фиксированное позиционирование элементов и z-index , концепция типы мультимедиа, поддержка звуковых таблиц стилей (которые позже были заменены речевыми модулями CSS 3) [46] и двунаправленного текста, а также новые свойства шрифта, такие как тени.
W3C больше не поддерживает рекомендации CSS 2. [47]
Версия 1 CSS уровня 2, часто называемая «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, но низкоприоритетная работа над CSS 2.2 началась в 2015 году.
В отличие от CSS 2, который представляет собой большую единую спецификацию, определяющую различные функции, CSS 3 разделен на несколько отдельных документов, называемых «модулями». Каждый модуль добавляет новые возможности или расширяет функции, определенные в CSS 2, сохраняя обратную совместимость. Работа над CSS уровня 3 началась примерно во время публикации исходной рекомендации CSS 2. Самые ранние черновики CSS 3 были опубликованы в июне 1999 года. [50]
Из-за модульности разные модули имеют разную стабильность и статусы. [51]
Некоторые модули имеют статус кандидата в рекомендации ( 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. [62] В начале 2020 года была создана группа сообщества W3C для обсуждения и определения такого ресурса. [63] Фактический тип управления версиями также является предметом обсуждения, а это означает, что документ, когда он будет создан, не может называться «CSS4».
Каждый веб-браузер использует механизм компоновки для отображения веб-страниц, и поддержка функциональности CSS в них неодинакова. Поскольку браузеры не полностью анализируют CSS, для конкретных браузеров было разработано несколько методов кодирования с обходными путями (широко известными как CSS-хаки или CSS-фильтры). Внедрению новых функций CSS может препятствовать отсутствие поддержки в основных браузерах. Например, Internet Explorer не спешил с добавлением поддержки многих функций CSS 3, что замедлило внедрение этих функций и нанесло ущерб репутации браузера среди разработчиков. filterКроме того, в некоторых версиях использовался собственный синтаксис для свойства без префикса поставщика . [64] Чтобы обеспечить единообразие работы своих пользователей, веб-разработчики часто тестируют свои сайты в нескольких операционных системах, браузерах и версиях браузеров, что увеличивает время и сложность разработки. Такие инструменты, как BrowserStack, были созданы для упрощения обслуживания этих сред.
В дополнение к этим инструментам тестирования многие сайты поддерживают списки браузеров, поддерживающих определенные свойства CSS, включая CanIUse и MDN Web Docs . Кроме того, CSS 3 определяет запросы функций, которые предоставляют @supportsдирективу, которая позволит разработчикам ориентироваться на браузеры с поддержкой определенных функций непосредственно в их CSS. [65] CSS, который не поддерживается старыми браузерами, также иногда можно исправить с помощью полифилов JavaScript , которые представляют собой фрагменты кода JavaScript, предназначенные для обеспечения единообразного поведения браузеров. Эти обходные пути — а также необходимость поддержки резервных функций — могут усложнить проекты разработки, и, следовательно, компании часто определяют список версий браузера, которые они будут поддерживать, а которые — нет.
Поскольку веб-сайты принимают новые стандарты кода, несовместимые со старыми браузерами, эти браузеры могут быть лишены доступа ко многим ресурсам в сети (иногда намеренно). [66] Многие из самых популярных сайтов в Интернете не только визуально ухудшаются в старых браузерах из-за плохой поддержки CSS, но и вообще не работают, во многом из-за развития JavaScript и других веб-технологий.
Некоторые отмеченные ограничения текущих возможностей CSS включают:
Правила области действия для таких свойств, как z-index, ищут ближайший родительский элемент с атрибутом Position: Absolute или Position: относительным. Эта странная связь имеет нежелательные последствия. Например, невозможно избежать объявления новой области видимости, когда приходится корректировать положение элемента, что не позволяет использовать желаемую область действия родительского элемента.
CSS реализует псевдоклассы, которые обеспечивают определенную обратную связь с пользователем путем условного применения альтернативных стилей. Один псевдокласс CSS, " ", является динамическим (эквивалент JavaScript "onmouseover") и имеет потенциал для неправильного использования (например, реализация всплывающих окон при приближении курсора), [67] , но CSS не имеет возможности для клиента отключить его (нет свойство типа «disable») или ограничить его действие (нет значений типа «nochange» для каждого свойства).:hover
Невозможно назвать правило CSS, которое позволило бы (например) клиентским сценариям ссылаться на правило, даже если его селектор изменится.
Для достижения желаемого эффекта стили CSS часто приходится дублировать в нескольких правилах, что требует дополнительного обслуживания и более тщательного тестирования. Для решения этой проблемы были предложены некоторые новые функции CSS, но впоследствии от них отказались. [68] [69] Вместо этого авторы могут получить эту возможность, используя более сложные языки таблиц стилей, которые компилируются в CSS, такие как Sass , Less или Stylus .
Помимо псевдоэлемента, нельзя ориентироваться на определенные диапазоны текста без использования элементов-заполнителей.:first-letter
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]
JavaScript является частью триады технологий, которые должны изучить все веб-разработчики: HTML для определения содержимого веб-страниц, CSS для определения представления веб-страниц и JavaScript для определения поведения веб-страниц.
Определения из Викисловаря
СМИ из Commons
Учебники из Wikibooks
Ресурсы из Викиверситета
Данные из Викиданных
Обсуждения из Meta-Wiki
Документация из MediaWiki