Курс за обучение по CSS3 напредно ниво

1. Модерен CSS и еволюция на CSS

• От CSS3 до модерен CSS
• Текущи стандарти за CSS и реализация в браузърите
• Разбиране на спецификацията на CSS и поддръжката от браузърите
• Постепенно подобрение (Progressive enhancement)
• Откриване на функции и елегантно влошаване (graceful degradation)
• Разбиране на модерната CSS екосистема

2. Напреднали селектори

• Напреднати селектори на атрибути
• Структурни псевдокласи
• :is()
• :where()
• :not()
• :has() и релационни селектори
• Специфичност на селекторите
• Управление на специфичността в големи проекти
• Най-добрите практики за модерни селектори

3. Модерни цветове и визуални ефекти

• RGB, HSL и модерни цветови функции
• color(), lab(), lch(), oklab() и oklch()
• Релативни цветове
• Прозрачност и алфа канали
• Напреднали градиенти
• Линейни, радиални и конични градиенти
• color-mix()
• Интерполяция на цветовете
• CSS филтри и визуални ефекти
• Модерни системи за оцветяване и темизиране

4. CSS персонализирани променливи и дизайн системи

• CSS променливи / персонализирани променливи
• Промеменливи и резервни стойности (fallback values)
• Динамично темизиране
• Персонализация на ниво компонент
• Дизайн токенове с CSS
• Създаване на светли и тъмни теми
• Използване на var(), @property и типизирани персонализирани променливи
• Построяване на поддържаеми CSS дизайн системи

5. CSS вложане (nesting) и управление на каскадата

• Нативно CSS вложане
• Синтаксис и най-добрите практики за вложане
• CSS вложане спрямо препроцесорите
• Каскада и наследяване
• Каскадни слоеве с @layer
• Управление на CSS от трети страни
• @scope и концепции за областно ограничено стиране (scoped styling)
• Построяване на предвидими CSS архитектури

6. Напреднати оформления с Flexbox

• Повторение на основите на Flexbox
• Главна ос и напречна ос
• Напреднато подравняване
• Гъвкаво размеропресичане
• gap
• Обвиване (wrapping) и редоване (ordering)
• Вложени Flexbox оформления
• Често срещани Flexbox шаблони
• Адаптивни компоненти с използване на Flexbox

7. Напреднала CSS Grid

• Повторение на основите на Grid
• Експлицитни и имплицитни мрежи
• Напреднато размеропресичане на траси (track sizing)
• minmax()
• auto-fit и auto-fill
• min(), max() и clamp()
• Области на мрежата (Grid areas)
• Адаптивни Grid оформления
• Сложни странични оформления
• CSS Subgrid
• Използване на Subgrid за подравнени компоненти

8. Контейнерни запитвания (Container Queries) и компоненти-базиран адаптивност

• Защо медиите запитвания за viewport не винаги са достатъчни
• Концепции за контейнерни запитвания
• container-type
• @container
• Единици за дължина при контейнерни запитвания
• Компонент-движен адаптивен дизайн
• Стилови запитвания при контейнери (container query style queries)
• Проектиране на повторяеми адаптивни компоненти
• Контейнерни запитвания спрямо медиите запитвания

9. Модерен адаптивен дизайн

• Mobile-first дизайн
• Адаптивни точки на счупване (breakpoints)
• Течна типография (Fluid typography)
• Течно разстояние (Fluid spacing)
• clamp()
• Модерни единици за viewport:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Динамични съображения за viewport
• Единици, относителни към контейнера
• Адаптивни изображения и медии
• Намаляване на неоправданите медиите запитвания

10. Логически свойства и интернационализация

• Логически спрямо физически CSS свойства
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Логично размеропресичане
• Режими на писане (Writing modes)
• Оформления от дясно наляво (RTL)
• Построяване на международно адаптируеми интерфейси

11. Модерна типография

• Адаптивна типография
• Промеменливи шрифтове (Variable fonts)
• Съображения за зареждане на шрифтове
• font-size-adjust
• Течни типграфски мащаби
• Обвиване на текста и преливане (overflow)
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Най-добрите практики за модерна типография

12. Трансформации, преходи и анимации

• 2D и 3D трансформации
• Преходи (Transitions)
• Анимации с keyframes
• Функции за време (Timing functions)
• Композиция на анимации
• Перформанс на трансформациите
• Анимации, задвижвани от скролиране (Scroll-driven animations)
• animation-timeline
• Концепции за View-timeline
• Достъпност на движението (Motion accessibility)
• prefers-reduced-motion
• Съображения за перформанс

13. Модерни CSS UI функции

• Нативни CSS диалози и попоувъри (popovers)
• Стиране на интерактивни UI състояния
• :popover-open
• :modal
• :focus-visible
• :target
• Стиране на състояния на формуляри
• accent-color
• appearance
• field-sizing
• Модерни контролни елементи на формуляри
• Построяване на достъпни взаимодействия само с CSS

14. Напреднали CSS функции

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Функции за релативни цветове
• Комбиниране на функции за течни оформления
• Практически шаблони за адаптивен дизайн

15. CSS препроцесори

• Преглед на CSS препроцесорите
• LESS
• Промеменливи и миксини (mixins)
• Вложани стилове
• Функции и операции
• LESS спрямо модерен нативен CSS
• Кога препроцесорът все още е полезен
• Миграция на функции от препроцесори към нативен CSS

16. Дизайн и съображения за достъпност

• Най-добрите практики за модерен CSS
• Стиране, приоризиращо достъпността
• Състояния на фокус с клавиатура
• :focus-visible
• Намаляване на движението
• Контраст и цветови съображения
• Адативен текст и съдържание
• Текст върху изображения
• Достъпни адаптивни компоненти
• Постепенно подобрение

17. CSS перформанс и поддържаност

• Намаляване на CSS сложността
• Избягване на неоправдана специфичност
• Каскадни слоеве за поддържаност
• Повторяеми шаблони за утилити и компоненти
• Концепции за CSS ограничаване (containment)
• content-visibility
• Перформанс на рендиране и оформление
• Намаляване на промените в оформлението (layout shifts)
• Организация на големи CSS кодови бази
• Отстраняване на грешки в CSS с модерните инструменти за разработчици в браузърите

18. Практически модерен CSS проект

Участниците създават адаптивен модерен уеб интерфейс, включващ:

• CSS Grid
• Flexbox
• Subgrid
• Контейнерни запитвания
• CSS вложане
• Персонализирани променливи
• Каскадни слоеве
• Модерни селектори
• Течна типография
• Модерни единици за viewport
• Адаптивен дизайн
• Модерни цветове и градиенти
• Анимации и преходи
• Съображения за достъпност
• Най-добрите практики за перформанс