Successfully reported this slideshow.
Your SlideShare is downloading. ×

CSS. Практика

Ad

CSS. Практика
Как пересесть с препроцессоров
обратно на CSS.
MiniQ #14, 25.04.2019
Бондаренко Юрий / BWeb.Studio 1

Ad

Цель
Вернуться на CSS, захватив с собой "преимущества" препроцессоров
Почему CSS:
Стандарт
Активно развивается
Почему преп...

Ad

Квант
раздражения
3

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 37 Ad
1 of 37 Ad

CSS. Практика

Download to read offline

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

Про доклад:
В докладе я расскажу о том, как писать стили на чистом "ванильном" CSS. Мы рассмотрим возникающие перед вертальщиком практические задачи и способы их решения.

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

Про доклад:
В докладе я расскажу о том, как писать стили на чистом "ванильном" CSS. Мы рассмотрим возникающие перед вертальщиком практические задачи и способы их решения.

More Related Content

More from Vitebsk Miniq (20)

CSS. Практика

  1. 1. CSS. Практика Как пересесть с препроцессоров обратно на CSS. MiniQ #14, 25.04.2019 Бондаренко Юрий / BWeb.Studio 1
  2. 2. Цель Вернуться на CSS, захватив с собой "преимущества" препроцессоров Почему CSS: Стандарт Активно развивается Почему препроцессоры: Это удобно Элементы ЯП • • • • 2
  3. 3. Квант раздражения 3
  4. 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. 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. 6. 3. Проблемы с Gulp Пакет gulp-less не работает с Gulp 4, только 3.9.1 ⇓ Невозможность обновиться на более новые версии ⇓ Раздражающие сообщения об уязвимостях и аудите 6
  7. 7. Основные понятия 7
  8. 8. Препроцессор Свой язык, на выходе CSS SASS LESS Stylus Расширяют язык стилей: примеси, вложенные правила Дополняют элементами языков программирования: условия, циклы, переменные • • 8
  9. 9. Постпроцессор На входе CSS, на выходе CSS PostCSS Вендорные префиксы Поддержка современных и будущих стандартов Генерация дополнительного кода • • • 9
  10. 10. Инструментарий В примерах использованы: gulp 4 — Таск менеджер gulp-postcss — Постпроцессор postcss-preset-env — набор плагинов postcss-import — пример "нестандартного" плагина postcss-rtl — пример плагина-генератора кода • • • • • 10
  11. 11. Подготовка 11
  12. 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. 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. 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
  15. 15. 1. Хочу верстать и не страдать 15
  16. 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. 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. 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. 19. 2. Мама, я в Дубае 19
  20. 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. 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. 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
  23. 23. 3. Мне бы в HTTP/1.1 23
  24. 24. 3. Модульность и объединение  Этот плагин должен быть первым в вашем списке плагинов!  Подключаем плагин: const atImport = require( 'postcss-import' ) 24
  25. 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
  26. 26. 4. Не переменные, а Custom Properties 26
  27. 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. 28. 4. Custom properties Ограничения: Custom properties только в :root , иначе не будет обратной совместимости Custom properties в @media тоже без обратной совместимости • • 28
  29. 29. 5. We need to go deeper 29
  30. 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. 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
  32. 32. 6. Media queries 32
  33. 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. 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. 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
  36. 36. Конец, или что дальше? 36
  37. 37. CSS. Практика Бондаренко Юрий / BWeb.Studio   Вопросы? bndby.github.io/doklad-css/index.html 37

×