#js #css
Что такое CSS Houdini и для чего он используется?

Уровень: 9️⃣

CSS Houdini — это набор API, расширяющий возможности CSS при помощи создания собственных стилей и эффектов, которые невозможно реализовать стандартными свойствами CSS. Он предоставляет доступ к процессу рендеринга CSS, позволяя программистам «разблокировать» низкоуровневые возможности браузера.

Ресурсы для изучения:
📄 Статья
📄 Статья

#css
В чем разница css reset и normalize css?

Уровень: 4️⃣

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

CSS Reset: Удаляет все стандартные стили браузеров, устанавливая элементы в нулевое состояние, что позволяет разработчику начинать с чистого листа.
Normalize.css: Сохраняет некоторые полезные стили по умолчанию и улучшает согласованность отображения элементов, сохраняя при этом семантические стили.

Ресурсы для изучения:
📄 Статья
📱 YouTube

#css
Какие в CSS есть виды градиентов?

Уровень: 4️⃣

1. Линейные градиенты (linear-gradient): Переход между цветами по прямой линии.
2. Радиальные градиенты (radial-gradient): Переход между цветами от центральной точки к краям в круговой форме.
3. Конусные градиенты (conic-gradient): Переход между цветами вокруг центральной точки, создавая эффект круга (или конуса).

Ресурсы для изучения:
📔 Дока
📄 Статья

#css
Для чего используется CSS-атрибут ( attr )?

Уровень: 3️⃣

CSS-атрибут `attr()` используется для получения значений атрибутов HTML-элемента и отображения их в стиле. Однако на данный момент он поддерживается только для контента, определяемого в `content` в псевдоэлементах `::before` и `::after`.

Ресурсы для изучения:
📔 Дока
📄 Статья

#css
Какие есть варианты скрытия элемента со страницы с помощью CSS?

Уровень: 3️⃣

display: none; – полностью скрывает элемент и убирает его из потока документа.

visibility: hidden; – скрывает элемент, но оставляет место для него на странице.

opacity: 0; – делает элемент полностью прозрачным, но он по-прежнему занимает место в потоке документа.

position: absolute; с left: -9999px; – перемещает элемент за пределы видимости, сохраняя его в DOM.

Ресурсы для изучения:
📄 Статья

#css
Какие приоритеты у CSS-селекторов?

Уровень: 3️⃣

1. Инлайн стили: 1000
2. ID селекторы: 100
3. Классы, атрибуты и псевдоклассы: 10
4. Теги (элементы) и псевдоэлементы : 1
5. Универсальный селектор и селекторы потомков: 0

Ресурсы для изучения:
📄Статья
📹Видео

#css
Для чего нужно свойство object-fit в CSS?

Уровень: 4️⃣

object-fit — это CSS-свойство, которое определяет, как содержимое, например, изображение или видео, должно быть размещено (масштабировано и обрезано) в пределах своего контейнера. Это свойство особенно полезно для управления отображением медиа-ресурсов, сохраняя их пропорции и избегая искажений.

Ресурсы для изучения:
📔 Дока
📄 Статья

#css
Как сделать тень, падающую по границе
изображения?

Уровень: 3️⃣

drop-shadow ( ) - это функция в CSS,
используемая для добавления тени к границе
изображения. Она применяется с помощью
свойства filter и принимает значения для
смещения по оси х, смещения по оси Y, размытия и
цвета тени.

Ресурсы для изучения:
📔 Дока
📄 Статья
📱 Видео

#css

❓ Как устроены Flexbox и его основные свойства?

Flexbox, или Flexible Box Layout, — это метод компоновки в CSS, предназначенный для создания более гибких и отзывчивых макетов. Flexbox упрощает процесс выравнивания и распределения пространства между элементами в контейнере. Рассмотрим основные свойства:

1. display: flex
Это свойство устанавливает элемент как flex-контейнер, и его дочерние элементы становятся flex-элементами.

2. flex-direction
Это свойство определяет направление, в котором будут расположены flex-элементы. Возможные значения: row (по умолчанию), row-reverse, column, column-reverse.

3. justify-content
Свойство управляет выравниванием flex-элементов вдоль главной оси (по направлению flex-direction). Возможные значения: flex-start, flex-end, center, space-between, space-around.

4. align-items
Это свойство управляет выравниванием flex-элементов вдоль поперечной оси (перпендикулярно главной оси). Возможные значения: flex-start, flex-end, center, baseline, stretch.

5. flex-wrap
Свойство определяет, должны ли flex-элементы переноситься на новую строку, если они не помещаются в контейнер. Значения: nowrap (по умолчанию), wrap, wrap-reverse.

Пример:

.container {
  display: flex;
  flex-direction: row; /* Элементы располагаются по горизонтали */
  justify-content: center; /* Элементы выравниваются по центру */
  align-items: stretch; /* Элементы растягиваются на всю высоту строки */
  flex-wrap: wrap; /* Элементы будут переноситься на следующую строку */
}

🟰 Flexbox часто используется для создания адаптивных макетов. Он позволяет легко управлять пространством и выравниванием элементов, что упрощает процесс разработки более сложных интерфейсов.


Ресурсы для изучения:

📖 Статья

📹 Видео

💬 Новости

🎓 Платформа

#css

❔Что произойдет, если содержимое блока превысит его размеры?

При переполнении содержимого блока, оно по умолчанию будет выходить за его границы, что может привести к неэстетичному виду или наложению элементов.

Чтобы предотвратить это, можно использовать свойство overflow, которое поддерживает несколько значений:
- visible (по умолчанию, содержимое выходит за пределы блока)
- hidden (скрывает переполненное содержимое), scroll (добавляет прокрутку)
- auto (добавляет прокрутку, если содержимого больше, чем размер блока)

Например, для создания прокручиваемого блока с фиксированной высотой можно задать:

div { 
 height: 100px; 
 overflow: auto; 
}

Это добавит вертикальную прокрутку, если содержимое окажется больше 100 пикселей.


Ресурсы для изучения:


➡️ Вопрос

📖 Статья

💬 Новости

🎓 Платформа

#css

✍️ Какие есть значения у свойства position, и когда стоит использовать каждое из них?

Свойство position в CSS определяет, как элементы располагаются на веб-странице. Вот основные значения и их особенности:

1. static:
Это значение по умолчанию. Элемент располагается в стандартном потоке документа. Нельзя использовать свойства top, right, bottom и left.

2. relative:
Элемент располагается относительно своего нормального положения. Свойства top, right, bottom и left могут использоваться элемента. Элемент по-прежнему занимает место в потоке документа.

3. absolute:
Элемент располагается относительно ближайшего позиционированного (например, relative, absolute или fixed). Не занимает места в стандартном потоке документа.

4. fixed:
Элемент фиксируется относительно окна браузера. Он остается на месте при прокрутке страницы.

5. sticky:
Элемент ведет себя как relative, пока не достигнет заданной позиции при прокрутке, после чего становится фиксированным. Это полезно для создания навигационных панелей или заголовков, которые остаются видимыми при прокрутке.


Ресурсы для изучения:

📹 Видео

➡️ Вопрос

💬 Новости

🎓 Платформа

#css

👩‍💻 Каковы преимущества использования CSS-препроцессоров?


🔹Переменные и их повторное использование
- Можно определить основные цвета, размеры и другие значения как переменные
- При необходимости изменения достаточно обновить значение в одном месте
- Это особенно полезно для поддержания единого стиля на всем сайте

🔹Вложенные правила
- Позволяют писать CSS более структурированно, следуя HTML-иерархии
- Уменьшают повторение селекторов
- Делают код более читаемым и поддерживаемым

🔹Миксины
- Позволяют создавать переиспользуемые блоки стилей
- Особенно полезны для вендорных префиксов и часто повторяющихся комбинаций свойств
- Можно передавать параметры для создания гибких стилей

🔹Математические операции
- Возможность выполнять расчеты прямо в стилях
- Упрощает работу с относительными размерами и масштабированием

🔹Модульность
- Разделение стилей на отдельные файлы
- Импорт только нужных модулей
- Лучшая организация кода в крупных проектах

🔹Дополнительные функции
- Цветовые функции (осветление, затемнение)
- Циклы и условные операторы
- Расширенная работа с медиа-запросами

А используете ли вы CSS-препроцессоры в своих проектах?
Если нет, то почему предпочитаете работать с чистым CSS?

Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 Платформа

#css

👩‍🎨 Как работать с Tailwind CSS?

Tailwind CSS - это utility-first CSS фреймворк, который позволяет быстро создавать современные веб-интерфейсы, используя готовые классы прямо в HTML.


Основные концепции:

🔤 Базовые утилиты
- Размеры: w-6 (width), h-12 (height)
- Отступы: p-4 (padding), m-2 (margin)
- Цвета: text-blue-500, bg-gray-100
- Flexbox: flex, items-center, justify-between
- Grid: grid, grid-cols-3, gap-4

🔤 Адаптивный дизайн (breakpoints)
- sm: - от 640px
- md: - от 768px
- lg: - от 1024px
- xl: - от 1280px

🔤 Интерактивные состояния
- hover: - при наведении
- focus: - при фокусе
- active: - при клике
- disabled: - для отключенных элементов

🔤 Темная тема
Добавляйте префикс dark: к классам для стилизации в темной теме.

🔤 Директива @apply
Используется для извлечения повторяющихся utility классов в отдельные CSS классы.


📸 Лучшие практики

1. Используйте только предопределенные классы Tailwind
2. Избегайте произвольных значений в квадратных скобках (например w-[350px])
3. Группируйте классы по категориям для лучшей читаемости
4. Создавайте компоненты для переиспользуемых элементов
5. Используйте @apply умеренно, только когда это действительно необходимо

Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 Платформа

#css

🔥Найден отличный инструмент для работы с CSS Grid — CSS Grid Generator. Он позволяет настроить параметры грида и сразу получить готовый CSS-код.

Так что если нужны гриды, но вы все еще путаетесь с ними - сохраняйте)


💬 Новости

🎓 Платформа

#css

♾ Как в css сделать анимацию бесконечно
повторяющейся?


📖Анимации в CSS создаются с помощью ключевых кадров ( @keyframes ), которые
описывают, как элемент должен изменяться в течение времени.

📖Чтобы анимация
выполнялась бесконечно, необходимо указать значение infinite в свойстве
animation.


Пример:

@keyframes example {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.box {
  animation: example 1s infinite;
}

В этом примере элемент будет плавно перемещаться вверх и возвращаться на исходное
место каждую секунду.

Параметры анимации можно настраивать, изменяя длительность и
другие свойства, такие как ease-in, ease-out для контроля скорости анимации.


Ресурсы для изучения:

➡️ Вопрос

💬 Новости

🎓 База вопросов

#css

Как выровнять текст с маркерами в списках?

Каждый верстальщик сталкивается с проблемой: когда текст в маркированном списке переносится на новую строку, выравнивание "плывет" и выглядит неаккуратно.


❌ Проблема

Стандартное поведение при использовании list-style-position: inside помещает маркеры внутрь блока списка (что хорошо для сохранения границ), но при переносе текста на новую строку он начинает выезжать за визуальную линию маркеров. Результат — неаккуратный и непрофессиональный вид.


✅ Решение

Простая CSS-хитрость позволяет сохранить чистое выравнивание:

li {
  text-indent: -1em;
  padding: 0 0 0 1em;
}

Этот приём создаёт отрицательный отступ для первой строки текста и компенсирует его отступом слева для всего элемента. В результате вторая и все последующие строки будут аккуратно выровнены по вертикальной линии начала текста первой строки.


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#css

🚩Что такое vendor-prefixes в CSS

Vendor-prefixes — это специальные префиксы, которые добавляются к CSS-свойствам для поддержки новых или экспериментальных возможностей в разных браузерах. Каждый браузер реализует свои собственные версии новых свойств, прежде чем они станут стандартом.


Основные префиксы:

- -webkit- — для Chrome и Safari (движок WebKit)
- -moz- — для Firefox
- -ms- — для Internet Explorer и Edge
- -o- — для Opera


Примеры:

-webkit-transition: all 0.3s ease; /* WebKit */
-moz-border-radius: 10px;         /* Firefox */
-ms-flex: 1;                      /* Internet Explorer */
-o-animation: fade 1s;           /* Opera */

Зачем они нужны:

- Совместимость: позволяют использовать свойства до их полной поддержки в браузерах
- Тестирование: помогают опробовать экспериментальные возможности
- Корректное отображение: без префиксов свойства могут не работать или отображаться некорректно


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

Сегодня необходимость в префиксах снижается — спецификации стали стабильнее, а браузеры быстрее адаптируются. Но в некоторых случаях (например, трансформации и анимации) они всё ещё актуальны.

Для автоматического добавления префиксов используют Autoprefixer — инструмент, который на основе данных о поддержке браузеров сам вставляет нужные префиксы.


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#Css

🚩Какие техники используются для критического CSS и ленивой загрузки стилей?

✨Критический CSS

Критический CSS включает стили, необходимые для отображения контента, находящегося "выше сгиба" (above the fold), и встраивается непосредственно в HTML-документ, чтобы ускорить первую отрисовку.

Асинхронная загрузка остальных стилей

После этого оставшиеся стили можно загружать асинхронно, используя атрибуты:
- rel="preload"
- media="print" с последующим изменением на media="all"

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


✨Методы ленивой загрузки

Ленивая загрузка стилей позволяет подключать CSS-файлы по мере необходимости:
- С помощью JavaScript для загрузки стилей при скроллинге к определенной секции
- Используя атрибут media для подключения стилей при выполнении заданного условия

Также можно применять сборщики и инструменты, которые автоматически выделяют критические стили:
- Webpack
- Critical
- Penthouse
- CriticalCSS

Пример использования ленивой загрузки

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

В этом примере стили загружаются асинхронно, так как media="print" изначально предотвращает их применение к экранному отображению. После загрузки атрибут изменяется на media="all", и стили начинают применяться ко всем типам устройств.


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#CSS

🚩Почему margin: auto не центрирует элемент, а иногда центрирует?

На самом деле это работает только в очень специфических условиях, а в остальных случаях создает больше проблем, чем решает.

Margin: auto работает только тогда, когда браузер может вычислить "лишнее" пространство. Для блочных элементов это работает горизонтально (если есть ширина), но НЕ работает вертикально. Для инлайн элементов не работает вообще.


Типичные ошибки с margin: auto:

/* Плохо - не сработает */
.center-me {
    margin: auto; /* Вертикально НЕ центрирует! */
    width: 300px;
    height: 200px;
}

/* Плохо - инлайн элементы игнорируют margin: auto */
span {
    margin: auto; /* Бесполезно для инлайн */
}

Когда margin: auto действительно работает:

/* Хорошо - центрирование блока горизонтально */
.container {
    width: 300px; /* Обязательно указать ширину! */
    margin: 0 auto; /* Только горизонтально */
}

/* Современное решение - используйте flexbox */
.parent {
    display: flex;
    justify-content: center; /* Горизонтально */
    align-items: center; /* Вертикально */
}

📎Почему margin: auto такой "капризный":

🟣Нужна явная ширина — без width браузер не знает, что центрировать
🟣Работает только горизонтально — вертикальное центрирование требует других методов
🟣Не работает с float — плавающие элементы выходят из нормального потока
🟣Игнорируется инлайн элементами — нужно сделать display: block


Современные альтернативы намного надежнее:
- Flexbox для одномерного центрирования
- Grid для двумерного позиционирования
- Position + transform для абсолютного центрирования


✅ Современный подход:
- Используйте flexbox/grid вместо margin: auto для центрирования
- Margin: auto оставьте для горизонтального центрирования блоков
- Изучите современные методы layout вместо старых трюков


❌ Избегайте:
- Попыток вертикального центрирования через margin: auto
- Использования без явной ширины элемента
- Применения к инлайн элементам


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#CSS

🚩Можете объяснить концепцию CSS box model?

Box Model — это основа основ CSS. Каждый элемент на веб-странице представляет собой прямоугольную коробку, состоящую из четырех областей. Понимание этой концепции критично для правильной верстки!


Структура Box Model (изнутри наружу):

1️⃣Content (Контент) — само содержимое элемента
2️⃣Padding (Внутренние отступы) — пространство между контентом и границей
3️⃣Border (Граница) — рамка вокруг padding + content
4️⃣Margin (Внешние отступы) — пространство между элементом и соседними элементами

.box {
    width: 300px;          /* Ширина контента */
    height: 200px;         /* Высота контента */
    padding: 20px;         /* Внутренние отступы */
    border: 5px solid red; /* Граница */
    margin: 10px;          /* Внешние отступы */
}

Реальная ширина элемента = content + padding + border
В примере выше: 300px + 40px + 10px = 350px


🖇Два режима подсчета размеров:

Content-box (по умолчанию):
- width/height применяются только к контенту
- padding и border добавляются к размерам

Border-box (рекомендуется):
- width/height включают content + padding + border
- Размер остается предсказуемым

/* Современный подход */
* {
    box-sizing: border-box;
}

.box {
    width: 300px; /* Общая ширина с padding и border */
    padding: 20px;
    border: 5px solid red;
}
/* Итоговая ширина = 300px (как и задано) */

🖇Практические особенности:

Margin схлопывание:
Вертикальные margin соседних элементов объединяются:

.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px (не 50px!) */

Padding и фон:
Padding наследует фоновый цвет элемента, margin — нет:

.box {
    background: blue;
    padding: 20px; /* Синий фон */
    margin: 20px;  /* Прозрачно */
}

✅Лучшие практики:

- Всегда используйте box-sizing: border-box
- Помните про схлопывание margin при вертикальной разметке
- Используйте developer tools для визуализации box model
- Для внутренних отступов — padding, для внешних — margin


❌Частые ошибки:
- Забывать про border при расчете размеров в content-box
- Использовать margin для внутренних отступов
- Не учитывать схлопывание margin


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов