SlideShare a Scribd company logo

CSS. Практика

Презентация подготовлена по материалам выступления Юрия Бондаренко на витебском MiniQ#14, который был проведен 25 апреля 2019: https://vk.com/miniq14; https://communities.by/events/miniq-vitebsk-14. Про доклад: В докладе я расскажу о том, как писать стили на чистом "ванильном" CSS. Мы рассмотрим возникающие перед вертальщиком практические задачи и способы их решения.

1 of 37
Download to read offline
CSS. Практика
Как пересесть с препроцессоров
обратно на CSS.
MiniQ #14, 25.04.2019
Бондаренко Юрий / BWeb.Studio 1
Цель
Вернуться на CSS, захватив с собой "преимущества" препроцессоров
Почему CSS:
Стандарт
Активно развивается
Почему препроцессоры:
Это удобно
Элементы ЯП
•
•
•
•
2
Квант
раздражения
3
1. Вычисляемые выражения
LESS
a {
font: 12pt/10pt sans-serif ;
}
.item-c {
grid-column: 3 / span 2 ;
grid-row: span 3 / 6 ;
}
CSS
a {
font: 12pt/10pt sans-serif;
}
.item-c {
grid-column: 3 span 2;
grid-row: span 0.5;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.
4
2. Экранирование функций
LESS
div {
width: calc(50% - 100px);
height: ~"calc(50% - 100px)";
}
CSS
div {
width: calc(-50%);
height: calc(50% - 100px);
}
01.
02.
03.
04.
01.
02.
03.
04.
5
3. Проблемы с Gulp
Пакет gulp-less не работает с Gulp 4, только 3.9.1
⇓
Невозможность обновиться на более новые версии
⇓
Раздражающие сообщения об уязвимостях и аудите
6

Recommended

Производительность запросов в PostgreSQL - шаг за шагом / Илья Космодемьянски...
Производительность запросов в PostgreSQL - шаг за шагом / Илья Космодемьянски...Производительность запросов в PostgreSQL - шаг за шагом / Илья Космодемьянски...
Производительность запросов в PostgreSQL - шаг за шагом / Илья Космодемьянски...Ontico
 
CSSO — сжимаем CSS Роман Дворнов, Avito
 CSSO — сжимаем CSS Роман Дворнов, Avito CSSO — сжимаем CSS Роман Дворнов, Avito
CSSO — сжимаем CSS Роман Дворнов, Avitoit-people
 
Создание настроек темы оформления в InSales
Создание настроек темы оформления в InSalesСоздание настроек темы оформления в InSales
Создание настроек темы оформления в InSalesInSales
 
построение внутренней ссылочной структуры сайта на Drupal 7 (seo). Костин ...
построение внутренней ссылочной структуры сайта на Drupal 7 (seo). Костин ...построение внутренней ссылочной структуры сайта на Drupal 7 (seo). Костин ...
построение внутренней ссылочной структуры сайта на Drupal 7 (seo). Костин ...PVasili
 
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки
Cпецкурс 2014, занятие 9 (1 часть). Языки разметкиCпецкурс 2014, занятие 9 (1 часть). Языки разметки
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки7bits
 
Easy authcache 2 кеширование для pro родионов игорь
Easy authcache 2   кеширование для pro родионов игорьEasy authcache 2   кеширование для pro родионов игорь
Easy authcache 2 кеширование для pro родионов игорьdrupalconf
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда7bits
 
React со скоростью света: не совсем обычный серверный рендеринг
React со скоростью света: не совсем обычный серверный рендерингReact со скоростью света: не совсем обычный серверный рендеринг
React со скоростью света: не совсем обычный серверный рендерингTimophy Chaptykov
 

More Related Content

What's hot

Оптимизация графики на практике
Оптимизация графики на практикеОптимизация графики на практике
Оптимизация графики на практикеTimophy Chaptykov
 
Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...
Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...
Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...Ontico
 
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...Ontico
 
Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)
Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)
Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)Ontico
 
Иван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияИван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияYandex
 
2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса
2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса
2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервисаОмские ИТ-субботники
 

What's hot (6)

Оптимизация графики на практике
Оптимизация графики на практикеОптимизация графики на практике
Оптимизация графики на практике
 
Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...
Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...
Основы индексирования и расширенные возможности EXPLAIN в MySQL / Василий Лук...
 
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...
Tempesta FW: challenges, internals, use cases / Александр Крижановский (Tempe...
 
Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)
Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)
Осваиваем Tarantool 1.6 / Евгений Шадрин (Sberbank Digital Ventures)
 
Иван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизацияИван Карев — Клиентская оптимизация
Иван Карев — Клиентская оптимизация
 
2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса
2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса
2015 09-05 02 Сергей Сорокин. Обзор и анализ мобильного backend сервиса
 

Similar to CSS. Практика

Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkAlbina Tiupa
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSDataArt
 
пользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSSпользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSSZigzag_McQuack
 
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Ontico
 
Ускорение frontend-разработки с помощью Haml, Sass, Compass
Ускорение frontend-разработки с помощью Haml, Sass, CompassУскорение frontend-разработки с помощью Haml, Sass, Compass
Ускорение frontend-разработки с помощью Haml, Sass, CompassAndrey Sitnik
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011
 
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ontico
 
CSSO — минимизируем CSS
 CSSO — минимизируем CSS CSSO — минимизируем CSS
CSSO — минимизируем CSSRoman Dvornov
 
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.ADCI Solutions
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptCSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptAlexey Ivanov
 
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitВёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitAndrey Sitnik
 
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Yandex
 
Регрессионное тестирование верстки
Регрессионное тестирование версткиРегрессионное тестирование верстки
Регрессионное тестирование версткиTalks&Works
 
Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерRoman Dvornov
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машинRoman Dvornov
 
Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Yandex
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10Technopark
 

Similar to CSS. Практика (20)

Парсим CSS
Парсим CSSПарсим CSS
Парсим CSS
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass framework
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
 
пользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSSпользовательские свойства как основа архитектуры CSS
пользовательские свойства как основа архитектуры CSS
 
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
 
Ускорение frontend-разработки с помощью Haml, Sass, Compass
Ускорение frontend-разработки с помощью Haml, Sass, CompassУскорение frontend-разработки с помощью Haml, Sass, Compass
Ускорение frontend-разработки с помощью Haml, Sass, Compass
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
 
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
 
CSSO — минимизируем CSS
 CSSO — минимизируем CSS CSSO — минимизируем CSS
CSSO — минимизируем CSS
 
LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.LESS and even more. Anton Shubkin.
LESS and even more. Anton Shubkin.
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptCSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
 
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, JammitВёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
 
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
 
Регрессионное тестирование верстки
Регрессионное тестирование версткиРегрессионное тестирование верстки
Регрессионное тестирование верстки
 
Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьер
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
 
SASS & LESS
SASS & LESSSASS & LESS
SASS & LESS
 
Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Алексей Андросов "Тотальная заморозка = быстрая загрузка"
Алексей Андросов "Тотальная заморозка = быстрая загрузка"
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10
 

More from Vitebsk Miniq

Runtime compilation and code execution in groovy
Runtime compilation and code execution in groovyRuntime compilation and code execution in groovy
Runtime compilation and code execution in groovyVitebsk Miniq
 
The 5 Laws of Software Estimates
The 5 Laws of Software EstimatesThe 5 Laws of Software Estimates
The 5 Laws of Software EstimatesVitebsk Miniq
 
Latest & Greatest Observability Release 7.9
Latest & Greatest Observability Release 7.9Latest & Greatest Observability Release 7.9
Latest & Greatest Observability Release 7.9Vitebsk Miniq
 
Тестирование Spring-based приложений
Тестирование Spring-based приложенийТестирование Spring-based приложений
Тестирование Spring-based приложенийVitebsk Miniq
 
Семантический поиск - что это, как работает и чем отличается от просто поиска
Семантический поиск - что это, как работает и чем отличается от просто поискаСемантический поиск - что это, как работает и чем отличается от просто поиска
Семантический поиск - что это, как работает и чем отличается от просто поискаVitebsk Miniq
 
Локализационное тестирование - это не только перевод
Локализационное тестирование - это не только переводЛокализационное тестирование - это не только перевод
Локализационное тестирование - это не только переводVitebsk Miniq
 
ISTQB Сертификация тестировщиков: быть или не быть?
ISTQB Сертификация тестировщиков: быть или не быть?ISTQB Сертификация тестировщиков: быть или не быть?
ISTQB Сертификация тестировщиков: быть или не быть?Vitebsk Miniq
 
Apollo GraphQL Federation
Apollo GraphQL FederationApollo GraphQL Federation
Apollo GraphQL FederationVitebsk Miniq
 
Who is a functional tester
Who is a functional testerWho is a functional tester
Who is a functional testerVitebsk Miniq
 
Вперед в прошлое
Вперед в прошлоеВперед в прошлое
Вперед в прошлоеVitebsk Miniq
 
CloudFormation experience
CloudFormation experienceCloudFormation experience
CloudFormation experienceVitebsk Miniq
 
Learning Intelligence: the story of mine
Learning Intelligence: the story of mineLearning Intelligence: the story of mine
Learning Intelligence: the story of mineVitebsk Miniq
 
Как программисты могут спасти мир
Как программисты могут спасти мирКак программисты могут спасти мир
Как программисты могут спасти мирVitebsk Miniq
 
Использование AzureDevOps при разработке микросервисных приложений
Использование AzureDevOps при разработке микросервисных приложенийИспользование AzureDevOps при разработке микросервисных приложений
Использование AzureDevOps при разработке микросервисных приложенийVitebsk Miniq
 
Distributed tracing system in action. Instana Tracing.
Distributed tracing system in action. Instana Tracing.Distributed tracing system in action. Instana Tracing.
Distributed tracing system in action. Instana Tracing.Vitebsk Miniq
 
Насорил - убери!
Насорил - убери!Насорил - убери!
Насорил - убери!Vitebsk Miniq
 
Styled-components. Что? Когда? И зачем?
Styled-components. Что? Когда? И зачем?Styled-components. Что? Когда? И зачем?
Styled-components. Что? Когда? И зачем?Vitebsk Miniq
 
Красные флаги и розовые очки
Красные флаги и розовые очкиКрасные флаги и розовые очки
Красные флаги и розовые очкиVitebsk Miniq
 
Разделяй и властвуй!
Разделяй и властвуй!Разделяй и властвуй!
Разделяй и властвуй!Vitebsk Miniq
 

More from Vitebsk Miniq (20)

Runtime compilation and code execution in groovy
Runtime compilation and code execution in groovyRuntime compilation and code execution in groovy
Runtime compilation and code execution in groovy
 
The 5 Laws of Software Estimates
The 5 Laws of Software EstimatesThe 5 Laws of Software Estimates
The 5 Laws of Software Estimates
 
Latest & Greatest Observability Release 7.9
Latest & Greatest Observability Release 7.9Latest & Greatest Observability Release 7.9
Latest & Greatest Observability Release 7.9
 
Тестирование Spring-based приложений
Тестирование Spring-based приложенийТестирование Spring-based приложений
Тестирование Spring-based приложений
 
Семантический поиск - что это, как работает и чем отличается от просто поиска
Семантический поиск - что это, как работает и чем отличается от просто поискаСемантический поиск - что это, как работает и чем отличается от просто поиска
Семантический поиск - что это, как работает и чем отличается от просто поиска
 
Локализационное тестирование - это не только перевод
Локализационное тестирование - это не только переводЛокализационное тестирование - это не только перевод
Локализационное тестирование - это не только перевод
 
ISTQB Сертификация тестировщиков: быть или не быть?
ISTQB Сертификация тестировщиков: быть или не быть?ISTQB Сертификация тестировщиков: быть или не быть?
ISTQB Сертификация тестировщиков: быть или не быть?
 
Apollo GraphQL Federation
Apollo GraphQL FederationApollo GraphQL Federation
Apollo GraphQL Federation
 
Who is a functional tester
Who is a functional testerWho is a functional tester
Who is a functional tester
 
Crawling healthy
Crawling healthyCrawling healthy
Crawling healthy
 
Вперед в прошлое
Вперед в прошлоеВперед в прошлое
Вперед в прошлое
 
CloudFormation experience
CloudFormation experienceCloudFormation experience
CloudFormation experience
 
Learning Intelligence: the story of mine
Learning Intelligence: the story of mineLearning Intelligence: the story of mine
Learning Intelligence: the story of mine
 
Как программисты могут спасти мир
Как программисты могут спасти мирКак программисты могут спасти мир
Как программисты могут спасти мир
 
Использование AzureDevOps при разработке микросервисных приложений
Использование AzureDevOps при разработке микросервисных приложенийИспользование AzureDevOps при разработке микросервисных приложений
Использование AzureDevOps при разработке микросервисных приложений
 
Distributed tracing system in action. Instana Tracing.
Distributed tracing system in action. Instana Tracing.Distributed tracing system in action. Instana Tracing.
Distributed tracing system in action. Instana Tracing.
 
Насорил - убери!
Насорил - убери!Насорил - убери!
Насорил - убери!
 
Styled-components. Что? Когда? И зачем?
Styled-components. Что? Когда? И зачем?Styled-components. Что? Когда? И зачем?
Styled-components. Что? Когда? И зачем?
 
Красные флаги и розовые очки
Красные флаги и розовые очкиКрасные флаги и розовые очки
Красные флаги и розовые очки
 
Разделяй и властвуй!
Разделяй и властвуй!Разделяй и властвуй!
Разделяй и властвуй!
 

CSS. Практика

  • 1. CSS. Практика Как пересесть с препроцессоров обратно на CSS. MiniQ #14, 25.04.2019 Бондаренко Юрий / BWeb.Studio 1
  • 2. Цель Вернуться на CSS, захватив с собой "преимущества" препроцессоров Почему CSS: Стандарт Активно развивается Почему препроцессоры: Это удобно Элементы ЯП • • • • 2
  • 4. 1. Вычисляемые выражения LESS a { font: 12pt/10pt sans-serif ; } .item-c { grid-column: 3 / span 2 ; grid-row: span 3 / 6 ; } CSS a { font: 12pt/10pt sans-serif; } .item-c { grid-column: 3 span 2; grid-row: span 0.5; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07. 4
  • 5. 2. Экранирование функций LESS div { width: calc(50% - 100px); height: ~"calc(50% - 100px)"; } CSS div { width: calc(-50%); height: calc(50% - 100px); } 01. 02. 03. 04. 01. 02. 03. 04. 5
  • 6. 3. Проблемы с Gulp Пакет gulp-less не работает с Gulp 4, только 3.9.1 ⇓ Невозможность обновиться на более новые версии ⇓ Раздражающие сообщения об уязвимостях и аудите 6
  • 8. Препроцессор Свой язык, на выходе CSS SASS LESS Stylus Расширяют язык стилей: примеси, вложенные правила Дополняют элементами языков программирования: условия, циклы, переменные • • 8
  • 9. Постпроцессор На входе CSS, на выходе CSS PostCSS Вендорные префиксы Поддержка современных и будущих стандартов Генерация дополнительного кода • • • 9
  • 10. Инструментарий В примерах использованы: gulp 4 — Таск менеджер gulp-postcss — Постпроцессор postcss-preset-env — набор плагинов postcss-import — пример "нестандартного" плагина postcss-rtl — пример плагина-генератора кода • • • • • 10
  • 12. 1. Подключаем gulpfile.js const { task, src, dest } = require( 'gulp' ) const postcss = require( 'gulp-postcss' ) const postcssPresetEnv = require( 'postcss-preset-env' ) const atImport = require( 'postcss-import' ) 01. 02. 03. 04. 12
  • 13. 2. Настраиваем gulpfile.js const postcssOptions = [ atImport(), postcssPresetEnv({ stage: 0, autoprefixer: { grid: true, browsers: [ 'last 2 versions', 'ie >= 11' ] } }) ] 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 13
  • 14. 3. Запускаем gulpfile.js const css = () => { return src( './src/assets/css/*.css' ) .pipe( postcss( postcssOptions ) ) .pipe( dest( './dest/assets/css' ) ) } task( 'CSS', css ) 01. 02. 03. 04. 05. 06. 14
  • 16. 1. Grid Layout ❤ IE10+ Исходный CSS .layout { display: grid; grid-template-areas: "item1 item1 item2" "item3 item4 item4"; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-gap: 20px; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 16
  • 17. 1. Grid Layout ❤ IE10+ .layout { display: -ms-grid; display: grid; grid-template-areas: "item1 item1 item2" "item3 item4 item4"; -ms-grid-columns: 1fr 20px 1fr 20px 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: auto 20px auto; grid-template-rows: auto auto; grid-gap: 20px; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 17
  • 18. 1. Grid Layout ❤ IE10+ Что пока нельзя использовать: grid-auto-columns grid-auto-rows grid-auto-flow Ограничения: Каждый grid-элемент сетки должен иметь уникальное имя Для использования grid-gap свойства grid-template-areas и grid-template-columns должны быть определены. • • • • • 18
  • 19. 2. Мама, я в Дубае 19
  • 20. 2. RTL: Генерация кода  Для гридов и флексов RTL не нужен!  Подключаем плагин: const rtl = require( 'postcss-rtl' ) src( 'style.css' ) .pipe( postcss( [ rtl( options ) ]) ) .pipe( dest( './dest' ) ) 01. 02. 03. 04. 20
  • 21. 2. RTL: Генерация кода Исходный CSS .foo { float: right; margin-left: 13px; font-size: 13px; } Обработанный CSS .foo { font-size: 13px; } [dir="ltr"] .foo { float: right; margin-left: 13px; } [dir="rtl"] .foo { float: left; margin-right: 13px; } 01. 02. 03. 04. 05. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 21
  • 22. 2. RTL: Псевдокласс dir Исходный CSS blockquote:dir(rtl) { margin-right: 10px; } blockquote:dir(ltr) { margin-left: 10px; } Обработанный CSS [dir="rtl"] blockquote { margin-right: 10px; } [dir="ltr"] blockquote { margin-left: 10px; } 01. 02. 03. 04. 05. 06. 01. 02. 03. 04. 05. 06. 22
  • 24. 3. Модульность и объединение  Этот плагин должен быть первым в вашем списке плагинов!  Подключаем плагин: const atImport = require( 'postcss-import' ) 24
  • 25. 3. Модульность и объединение @import url('vars.css'); @import url('common.css'); @import url('node_modules/swiper/dist/css/swiper.min.css'); @import url('https://fonts.googleapis.com/css?family=Roboto'); 01. 02. 03. 04. 25
  • 27. 4. Custom properties Исходный CSS :root { --fontSize: 1rem; --mainColor: #12345678; } body { color: var(--mainColor); font-size: var(--fontSize); } Обработанный CSS :root { --fontSize: 1rem; --mainColor: rgba(18,52,86,0.47); } body { color: rgba(18,52,86,0.47); color: var(--mainColor); font-size: 1rem; font-size: var(--fontSize); } 01. 02. 03. 04. 05. 06. 07. 08. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 27
  • 28. 4. Custom properties Ограничения: Custom properties только в :root , иначе не будет обратной совместимости Custom properties в @media тоже без обратной совместимости • • 28
  • 29. 5. We need to go deeper 29
  • 30. 5. Вложенные селекторы Исходный CSS a { color: white; & span { color: green; } @nest span & { color: blue; } @media (min-width: 30em) { color: yellow; } &:hover { color: red; } } Обработанный CSS a { color: white; } a span { color: green; } span a { color: blue; } @media (min-width: 30em) { a { color: yellow; } } a:hover { color: red; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 01. 02. 03. 04. 05. 06. 07. 30
  • 31. 5. Вложенные селекторы Ограничения Исходный CSS .block { color: white; &__el { color: green; } } Обработанный CSS .block { color: white; &__el { color: green; } } 01. 02. 03. 04. 01. 02. 03. 04. 31
  • 33. 6. Custom media queries Исходный CSS @custom-media --s (max-width: 480px); @media (--s) { /* стили для телефона */ width: 100% } Обработанный CSS @media (max-width: 480px) { /* стили для телефона */ width: 100%; } 01. 02. 03. 04. 05. 01. 02. 03. 04. 33
  • 34. 6. Media queries Исходный CSS @custom-media --only-tablet (width >= 768px) and (width < 1200px); @media (--only-tablet) { /* планшет */ } Обработанный CSS @media (min-width: 768px) and (max-width: 1199px) { /* планшет */ } 01. 02. 03. 04. 01. 02. 03. 34
  • 35. Песочницы https://autoprefixer.github.io/ — Autoprefixer https://preset-env.cssdb.org/playground — PostCSS Preset Env Ссылки https://youtu.be/CaDnbOjXjRg — Вадим Макеев, Мой ванильный CSS https://youtu.be/g20pCKeSgUU — Вероника Новикова, CSS ещё не торт • • • • 35
  • 37. CSS. Практика Бондаренко Юрий / BWeb.Studio   Вопросы? bndby.github.io/doklad-css/index.html 37