Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS. Практика

162 views

Published on

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

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

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×