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 арт и готовые визуальные решения. 10. Пример организации CSS Правила и подходы, проверенные мной. Обратите внимание на названия классов, использование компонентов, кастомизацию, комментирование.

Теперь можете спокойно отвечать на вопрос: "Какие знаешь псевдо-классы?". https://habr.com/ru/companies/ruvds/articles/864762/

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

<div id="box" class="box"></div>

@layer basic, components;

.box {
  width: 1rem;
  height: 1rem;
}

@layer components {

  .box {
    background-color: pink;
  }
}

@layer basic {

  #box {
    background-color: blue;
  }
}

Слои CSS имеют приоритет перед селекторами. Вот почему в нашем примере идентификатор не имеет более высокого приоритета, чем класс. Вместо этого, класс имеет более высокое значение. Почему? Потому что слои определены в порядке приоритета. Последний из них более высокий. Поэтому ответ - pink.

Мне нравится вести этот канал. Я рад, что вам интересно. Но чисто на энтузиазме я долго не протяну. Моя задача — создать модель, которая позволит существовать каналу ни один год. Тут вся моя надежда связана с вами. Я верю, что вы не дадите проекту CSS isn't magic загнуться. В этом канале опубликованы посты за 3 месяца. Сейчас их 17 штук. Все оставшиеся хранятся в отдельном закрытом канале. Всего у меня 52 поста. Да, все они когда-то появятся здесь. Но если вы хотите, чтобы вся моя движуха не умерла, то помогите мне, пожалуйста. Для этого напишите мне @melnik909 . Я расскажу, как вступить в закрытый канал. Спасибо!

У меня есть менторство. Я помогаю людям изучать CSS. Со мной можно: — Подготовиться к вопросам по CSS так, что будете знать больше, чем интервьюер на собеседовании; — Понять, что вы знаете CSS лучше, чем большинство разработчиков; — Создать pen, чтобы он был на главной Codepen; — Подготовить статью для публикации на Хабре, чтобы получился хороший рейтинг; — Получить код-ревью и альтернативные решения для своих задач по верстке; — Реализовать любую вашу идею. Я не люблю созвоны. Общаюсь в чате. Деньги беру за решение задачи, а не за время. Напишите, пожалуйста, мне @melnik909, если хотите попасть. В декабре есть 2 места.

Посмотрел видео о спорте в Белгороде Виктора Кравченко. В нем снялась девочка Ангелина. Она занимается спортивной гимнастикой, а в городе воют сирены. Она копит деньги. Как я понял, на поездку на соревнования в Санкт-Петербург. Давайте поможем? Вот текст из описания ролика: Отправить подарок Алевтине на Новый Год (карта её мамы): 2202208143154301 Всем, кто переведет любую сумму, я открою доступ к закрытым каналам со всем контентом на ваш выбор. Для этого напишите, пожалуйста, мне @melnik909, прислав скриншот экрана перевода.

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

border помогает пользователям режима Windows High Contrast найти границы элементов Кто-то сделал так

.infoblock {
  padding: 10px;
  background-color: #f7f1ff;
}

Я предлагаю делать так

.infoblock {
  padding: 8px;
  background-color: #f7f1ff;
  border: 1px solid transparent;
}

background-color не отображается при включенных настройках повышенной контрастности. В результате пользователи потеряют границы элемента. Решение. Добавьте border: 1px solid transparent.

Этот канал существует, как мой эксперимент сделать, что-то полезное и прибыльное. Я хотел поделиться своими знаниями и сделать их публично-доступными для всех. Чтобы вы без затрат имели возможность изучить что-то новое для себя. Вся эта модель может существовать, если среди читателей будут те, кто захочет поддерживать меня финансово. Чтобы я не пошел на работу, а занимался каналом. Писал статьи. Изучал материал, чтобы потом поделиться с вами. В общем окупил свое затраченное время. Если вы хотите помочь, но думаете, что у вас маленькая сумма денег или что помогут другие, пожалуйста, напишите мне @melnik909. Сейчас мне нужна ваша помощь.

Не забудьте остановить прокрутку страницы Кто-то сделал так

.side-navigation {
  height: 100dvh;
  overflow: auto;
}

Я предлагаю делать так

.side-navigation {
  height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
}

Делаете виджет с пользовательской прокруткой? overscroll-behavior позаботится о ваших пользователях, недав прокручивать страницу после прокрутки вашего виджета.

Все же, что-то могу. Мои анимации, где то засветились и резко набрали просмотры и лайки. Если найду, где, то скину

Ну что, я стал на год старше. Уже 34. Пока бодр. Решителен. Стараюсь вам помогать. Надеюсь выходит. Если хотите поздравить, то пишите мне @melnik909. А если захотите даже подарок сделать, то используйте, пожалуйста, перевод по номеру телефона + 7 937 415 01 83 (райффайзенбанк). А я все думаю покупать или не покупать шоколадку... Всем хорошего дня!

У меня есть менторство. Я помогаю людям изучать CSS. Со мной можно: — Подготовиться к вопросам по CSS так, что будете знать больше, чем интервьюер на собеседовании; — Понять, что вы знаете CSS лучше, чем большинство разработчиков; — Создать pen, чтобы он был на главной Codepen; — Подготовить статью для публикации на Хабре, чтобы получился хороший рейтинг; — Получить код-ревью и альтернативные решения для своих задач по верстке; — Реализовать любую вашу идею. Я не люблю созвоны. Общаюсь в чате. Деньги беру за решение задачи, а не за время. Напишите, пожалуйста, мне @melnik909, если хотите попасть. В декабре есть 2 места.

Я хочу признаться... Я ... В общем у меня есть привычка смотреть профили подписчиков. Постоянно удивляюсь. Открываешь профиль и мысль: "Вот это да...". Человек из крупной компании. Или блогер. Или человек в моем прошлом вдохновлял. Спасибо всем, что читаете! Еще хочу сказать. Если вы видите, что я могу чем-то быть полезен вам, то напишите мне @melnik909. Я всегда открыт к разным активностям. Все можно обсудить. Хороший выходных!