Cascading Style Sheets

 

 

 

 

Cascading Style Sheets

 

17.12.1996

Международный консорциум W3.org опубликовал рекомендации по использованию CSS Level 1. Этот момент официально считается днем рождения Cascading Style Sheets — формального языка описания внешнего вида страницы с использованием языка разметки (HTML, XHTML, XML и так далее). 

До начала повсеместного использования CSS страницы веб-сайтов верстали при помощи таблиц. Некоторые веб-дизайнеры и верстальщики, заставшие тот период, называют его «темными веками».  Благодаря CSS перешли к вёрстке блочным методом.

С 1998 года (в HTML 4.0 реализована полная поддержка CSS и выпущена спецификация CSS2)  CSS стали массово использоваться.

История версий CSS:

Сам термин каскадные стили таблиц предложил в 1994 году Хокон Виум Ли (статья о нём)

 

 

 

 

Cascading Style Sheets

 

 

СSS  (Cascading Style Sheets) каскадные (иерархические) стилевые таблицы для расширения возможности форматирования HTML-документов.

В модели CSS документ состоит из набора взаимосвязанных и объединенных древовидной структуройобъектов.

Использование CSS позволяет отделить структуру и содержание документа от уровня его представления пользователю.

Одна таблица может использоваться в множестве документов.

CSS2 основан на CSS первого уровня и включет возможности точно располагать элементы и объекты WEB-страницы, а также звуковые таблицы стилей, позволяющие специальному программному обеспечению считывать содержимое WEB-страницы. http://www.siarion.net/rus/free/easyneatly/
Аккуратные таблицы стилей - «Easy Neatly»

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

 

См: Современный CSS для динозавров

 

 

 

 

CSS-анимация на Web-странице

 

CSS (Cascading Style Sheets) — каскадные таблицы стилей  — механизм добавления стиля в веб-документ.

Стиль - системная совокупность элеменотов оформления.

Таблица стилей - совокупность правил управления расположением и поведением элементов оформления страницы (шрифты, цвета и т.д).

Таблицы стилей могут быть внутренние (в коде HTML файла) и внешние (представляют собой файлы с расширением *.css.)

Анимация в CSS3 представляет собой изменение значения какого-либо свойства.

В CSS3 для задания CSS3 анимации используется свойство animation, содержащие запись различных свойств анимации:

  • animation-name — задает имя анимации

  • animation-duration — задает время проигрывания анимации

  • animation-timing-function — описывает метод расчета промежуточных значений свойств для анимации

  • animation-delay — задает задержку анимации

  • animation-iteration-count — задает количество циклов анимации

  • animation-direction — задает направление анимации

  • animation-play-state — определяет, проигрывается ли анимация или стоит на паузе...

Эти CSS3 свойства по разному поддерживаются  распространенными браузерами, поэтому они используются с вендорным префиксом (vendor-prefix).

Для Google Chrome и Safari: -webkit-

  • -webkit-animation-name — задает имя анимации

  • -webkit-animation-duration — задает время проигрывания анимации

  • ................................

 

 

 

 

SASS и LESS

 

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

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

В качестве решения проблемы был предложен SASS  (Syntactically Awesome Stylesheets) — метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Sass фактически является модулем Haml.

 

Haml (HTML abstraction markup language) — язык разметки для упрощённой генерации HTML.

HAML компилируется в HTML.

Эквивалент Haml для CSS — это Sass (или LESS).

 

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

Технология SASS:

  • берётся CSS-код,

  • предварительно обрабатывается,

  • в общий CSS-пакет помещается скомпилированный файл.

Одним из путей развития концепции SASS стал  LESS

LESS — это программируемый язык стилей, надстройка над CSS.

LESS разработал Alexis Sellier под влиянием языка стилей Sass.

LESS написан первоначально на языке Ruby, но в последующих версиях используется JavaScript.

LESS  — вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой.

LESS обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции

 


 

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

 

 

 

BEM

 

Новым решением автоматизации (технологизации) работы со стилями стал BEM (Block Element Modifier)

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

BEM особенно хорош тем, что делает компоненты уникальными #reusabilityFtw.

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

Но при этом возникли и новые проблемы:

  • Процедура выбора className превратилась в кропотливую задачу.

  • Со всеми этими длинными именами классов разметка стала раздутой.

  • Необходимо явно расширять каждый компонент интерфейса при каждом повторном использовании.

  • Разметка стала излишне семантической.

См:

 

 

 

CSS-модули + Styled-components + ...

 

 

CSS-модули - способ автоматизации BEM-нотации за счёт генерирования уникального className, которое не станет конфликтовать ни с одним другим, даже если будет использоваться одно и то же имя.

В основе CSS-модулей лежит создание динамических имён классов для каждого локально заданного стиля, что позволяет избавиться от визуальных регрессий, возникавших из-за внедрения новых CSS-свойств (теперь все стили инкапсулировались корректно)

Сами по себе CSS-модули не решают ключевых проблем CSS, они лишь показывают нам способ локализации определений стилей: умный способ автоматизации BEM, чтобы больше не пришлось заниматься выбором имён классов.


 

Styled-components — это библиотека визуальных примитивов, работающих как обёртки.

Ключевая особенность Styled-components в том, что стили теперь являются частью компонента, позволяя избавиться от CSS-классов как от промежуточного этапа между компонентом и его стилями. Они привязаны к конкретным HTML-тегам, которые всего лишь обёртывают дочерние компоненты с помощью styled-components.

Styled-components предоставляет очень простой паттерн для многократного использования и полностью отделяет интерфейс от компонентов функциональности и структуры. Создаётся API, имеющий доступ к нативным тегам — либо в браузере как HTML, либо нативно используется React Native. Это позволяет использовать все возможности JS для обработки наших стилей, которые при этом остаются согласующимися и готовыми к многократному использованию.

Макс Стойбер (один из создателей Styled-components):

  • Основная идея styled-components заключается в том, чтобы внедрить лучшие практики путем удаления мэппинга между стилями и компонентами


 

Glamor – другой взгляд на CSS новой волны!

 


 

Ни CSS-модули, ни styled-components сами по себе не стали идеальным решением. Необходим некий паттерн, чтобы всё это эффективно работало и масштабировалось.

Возможно ими окажутся Сore components (основные компоненты), единственное предназначение которых — стили.

 

 

 

CSS-инструментарий

 

Важнейшие инструменты при написании CSS кода встроены в браузеры:

  • расширение DevTools для браузера Chrome, встроенный и доступный через меню браузера набор инструментов разработчика в браузере

  • расширение Firefox Developer Edition для браузера Firefox

  • расширение Web Inspector в браузере Safari

  • инструменты разработчика (вызывающиеся клавишей F12) в браузере IE.

Расширение DevTools в браузере Chrome предназначено для поиска, анализа и исправления ошибок, профилирования кода CSS, выявления проблемных моментов, связанных с производительностью и замедляющих отрисовку и рендеринг страницы.

 Инструменты для форматирования и чистки CSS кода:

CSS Shrink  — сервис CSS-минификаци (уменьшения размера файла с CSS кодом). Позволяет убрать пробелы, комментарии, лишние переводы строк, отступы и пр. Ускоряет загрузку страницы, но делает код трудночитаемым.

Справочные материалы:

  • Codrops CSS Reference - полезный CSS справочник, может быть использован в качестве инструмента для изучения определенных CSS свойств, псевдо-классов, функций и т.д.

  • Викиучебник по каскадным таблицам стилей: https://ru.wikibooks.org/wiki/CSS (там много "красных" (еще не созданных) страниц, которые ждут своего автора - может быть Вас? (засчитывается за написание статьи в Википедии...).

  • Руководство по CSS для начинающих: http://technologyweb.org/

  • Справочник CSS: https://webref.ru/css

CSSSTATS - сервис сбора CSS-статистики сайтов

 

 

 

 

Математика разметки с помощью CSS

 

 

 

 

«Easy Neatly»

Аккуратные таблицы стилей

http://www.siarion.net/rus/free/easyneatly/