CSS isn't magic

Я давно собираюсь с мыслями. Хочу обратиться к тем, кто "не хочет делиться моим контентом", ставит говняшки и не хочет поддерживать меня. Спасибо вам! Вы одна из самых значимых оценок моей работы. Если вы тут, значит у меня получилось эмоционально на вас повлиять. Конечно, мне не понятно это. И у меня в голове вопрос: "Что вы тут делаете?". Но я горд, что у меня есть хейтеры. Значит не зря это все делаю.

Что я советую посмотреть из моего контента: 1. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи Рассказываю об ошибках в верстке, которые влияют на цифровую доступность. 2. Готовимся к вопросам по вёрстке на интервью Frontend-разработчика Отвечаю на самые популярные вопросы о CSS на интервью фронтендера. 3. Неизвестно полезный CSS Делюсь малоизвестными свойствами и нюансами работы. 4. Магия CSS на практике: советы по вёрстке от гика Мои любые подходы и приемы при работе с CSS. 5. Чёрт тебя возьми, CSS Объясняю сложные и неочевидные моменты работы CSS. 6. You Should Know CSS — the list of questions to level up your CSS skill Мой список вопросов, позволяющий найти слабые места в знаниях. 7. Живые шпаргалки для свойств display и position Шпаргалки на Codepen, показывающие множество неизвестных нюансов свойств. Можно потыкать и изучить. 8. Код компонента Timeline Как написать CSS для компонента? На этот вопрос можно найти ответ в этой демке. Правда, придется покапаться в коде. 9. Анимашки и CSS творчество UI Анимации, CSS арт и готовые визуальные решения. P.S. Продолжать создавать контент? 🔥 — Да 👎 — Иди работай уже, код пиши

Хотите получить доступ к закрытому каналу со всеми моими постами? Пожалуйста, напишите мне @melnik909. Я расскажу все детали.

Какое вычисленное значение свойства background-color у элемента p?

body {
  --bg-color: red;
  background-color: green;
}

p {
  --bg-color: inherit;
  background-color: var(--bg-color);
}

--bg-color: inherit получает значение red от --bg-color родительского элемента и переходит к background-color элемента p. Правильный ответ - red.

Я помогаю людям изучать CSS. Со мной можно: — Подготовиться к вопросам по CSS так, что будете знать больше, чем интервьюер на собеседовании; — Понять, что вы знаете CSS лучше, чем большинство разработчиков, и перестать срать себе в голову синдромом самозванца; — Получить код-ревью и альтернативные решения для своих задач по верстке. Я не люблю созвоны. Поэтому придумал свой формат. За подробностями пишите мне @melnik909. Деньги не всегда беру P.S. Жду ваших реакций. 🔥 — нравится, 👎 — перестать рекламировать.

Слушайте, я ищу пет-проекты для вдохновения. Если у вас есть такой, и хотите, чтобы я сделал вам бесплатно аудит, то пишите мне @melnik909

Какое вычисленное значение у свойства padding?

body {
  --padding-vertical-start: 1rem;
  --padding-horizontal-end: 2rem;
  --padding-vertical-end: 3rem;
}

.child {
  padding: var(--padding-vertical-start)
           var(--padding-horizontal-end)
           var(--padding-vertical-end)
           var(--padding-horizontal-start);
}

В случае использования пользовательских свойств для shorthand-свойств все значения должны быть определены. Если это не сделано, то shorthand-свойство не будет определено. Таким образом, свойство padding не определено.

https://habr.com/ru/companies/ruvds/articles/851140/ Пошарьте, пожалуйста, с коллегами эту статью. Если у вас есть внутренние чаты или свои каналы, буду признателен, если пошарите и там. Спасибо!

Еще сделал с лого канала

Кто живет вне РФ, сообщение для вас. Вы можете поддержать этот канал и получить небольшой кусочек моего творчества в свои руки. Ловите ссылку на мой стор и покупайте мерч!

Какое вычисленное значение у свойств color и background-color?

body {
  --bg-color: 10px;
  --color: 10px;
  color: red;
}

.child {
  color: var(--color);
  background-color: var(--bg-color);
}

При использовании невалидных значениях пользовательских свойств вычисляемое значение зависит от типа свойства. Если оно унаследовано, то значение наследуется, если нет, то оно является начальным. Ответ — red (унаследовано) и transparent (начальное значение для background-color).

Слушайте, я ищу пет-проекты для вдохновения. Если у вас есть такой, и хотите, чтобы я сделал вам бесплатно аудит, то пишите мне @melnik909

Для новеньких. Спасибо, что вы здесь! Я бездушный инфоциган-попрашайка. В среду каждую неделю публикую посты. Стабильно бешу некоторых опросами, прошу денег и рекламирую себя. Все по классике. Фидбек, критику, похвалу, вопросы и предложения можно писать мне @melnik909. Всех жду!

У меня есть менторство. Со мной можно развеять синдром самозванца, поняв, что знаете CSS на хорошем уровне. Подготовиться к вопросам по верстке на собеседовании. Увидеть что-то новое для себя. Пишите мне @melnik909. Расскажу детали

Слушайте, а давно я ничего не продавал! Вы можете поддержать мою работу, купив архив со всеми постами. Не будете ждать оставшиеся. А еще у вас будет ранний доступ к новым. Если хотите помочь, напишите мне @melnik909

Какая специфичность следующих правил?

:is(#container, .content, main) {
  color: red;
}

:where(#parent) {
  color: blue;
}

Специфичность :is() равняется наиболее специфичному селектору из списка селекторов, а :where() всегда — 0000. Правильный ответ — 0100 и 0000.