Что нужно знать о CSS!

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

Давайте разберемся с CSS в правильной перспективе.

Таблицы стилей в ретроспективе

Таблицы стилей были в той или иной форме с начала HTML в начале 1990-х.

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

Проблемы прорезывания с реализацией CSS

Многие реализации CSS чреваты несоответствиями, ошибками и прочими причудами. Авторам обычно приходилось использовать хаки и обходные пути, чтобы получить согласованные результаты для веб-браузеров и платформ.

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

Это только одна из сотен ошибок CSS, которые были задокументированы в различных версиях Internet Explorer, Netscape, Mozilla и Opera, многие из которых снижают читабельность документов. Распространение таких ошибок в реализациях CSS мешало дизайнерам добиться согласованного появления на разных платформах.

В настоящее время существует сильная конкуренция между движком макетов Mozilla Gecko, движком макетов Opera Presto и движком KHTML, используемым как в браузерах Apple Safari, так и в Linux Konqueror - каждый из них является лидером в различных аспектах CSS. Internet Explorer остается худшим в рендеринге CSS по стандартам, установленным Консорциумом World Wide Web с 2005 года.

Некоторые прорывы ...

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

Что делает таблицы стилей достаточно значимыми?

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

 Таблица стилей состоит из правил стилей, которые сообщают браузеру, как представлять документ. Существуют различные способы связать эти правила стиля с вашими документами HTML, но самый простой способ для начала - использовать элемент STYLE HTML. Этот элемент помещается в документ HEAD и содержит правила стиля для страницы.

Функциональность и использование CSS

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

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

Например, HTML-элемент h2 указывает, что содержащийся в нем текст является заголовком второго уровня. Он имеет более низкий уровень важности, чем заголовки h1, но более высокий уровень важности, чем заголовки h3. Этот аспект элемента h2 является структурным.

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

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

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

CSS также имеет свою долю несоответствий

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

Сравнение несоответствий: CSS против языков программирования

CSS также имеет некоторые подводные камни, общие для языков программирования. В частности, проблема выбора подходящих имен для классов и идентификаторов CSS может огорчать авторов CSS. В попытке выбрать описательные имена для классов CSS, авторы могут связать имя класса с желаемыми атрибутами представления; например, класс CSS, который будет применен к выделенному тексту, может быть назван «bigred», что означает, что он отображается крупным красным шрифтом.

Хотя такой выбор именования может быть интуитивно понятен для автора документа, он может вызвать проблемы, если автор позднее решит, что выделенный текст должен быть зеленым; у автора остался класс CSS с именем "bigred", который описывает что-то зеленое. В этом случае можно было бы «подчеркнуть» более подходящее имя класса, чтобы лучше описать цель или намерение класса, а не внешний вид элементов этого класса.

В языке программирования такое неправильное использование может быть аналогично использованию имени переменной «пять» для переменной, которая содержит значение 5; однако, если значение переменной изменится на 7, имя больше не будет подходящим.

CSS в двух словах

CSS используется как авторами, так и читателями веб-страниц для определения цветов, шрифтов, макета и других аспектов представления документа. Он предназначен главным образом для обеспечения возможности разделения структуры документа (написанного на HTML или аналогичном языке разметки) от представления документа (написанного на CSS).

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

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

Блог "WEB/SAD" студии