CSS isn't magic - Statistics & analytics of Telegram channel @css_is_not

185

Пишем код, реагирующий на изменение направления текста Кто-то сделал так

.container {
  box-sizing: border-box;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

.container {
  box-sizing: border-box;
  max-inline-size: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Круто же, когда код подстраивается под желания пользователя. Сейчас уже можно учитывать направление текста. Логические свойства это сделают!

185

Применяли ли вы техники из этого канала на работе?

Anonymous voting

185

Как вам такой CSS?

Anonymous voting

185

@layer reset {
  .uia-control {
     display: inline-flex;
    /* оставшиеся стили */
  }

  a.uia-control {
    text-decoration: none;
  }

  button.uia-control {
    border: none;
  }
}

.uia-control {
  border: 2px solid lightblue; /* правило применится ко всем элементам! */
}

185

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

185

background-color не подходит для кастомных радиокнопок Кто-то сделал так

.toggle[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: #242424;
  /* оставшиеся CSS */
}

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

.toggle[type="radio"]::before {
  content: "";
  border: 0.25rem solid #242424;
  /* оставшиеся CSS */
}

Делаете кастомные радиокнопки? Учтите, что в режиме высокой контрастности background-color не отображается. А вот с border будет все хорошо!

185

Ловите https://habr.com/ru/companies/ruvds/articles/883284/

185

Здорово, что есть продукты, которые можно попробовать без оплаты. Осмотреться. Понять, подходит ли. Только, как я заметил, у них есть одна особенность. Происходит магия, и они исчезают. Исчезает та ценность, которую они несли. Вот и CSS isn't magic может однажды пропасть из вашей телеги. Если вы не хотите, чтобы CSS стал магией, напишите мне @melnik909. Я расскажу, как можно помочь.

185

Это пример кейса из моего чеклиста "HTML и CSS техники для улучшения UI/UX". Я собрал 10 кейсов, помогающие пользователям меньше страдать. Техники можно применять на любом стеке и с любым опытом. Я специально не замудривал. В общем, если вы хотите улучшить UI/UX ваших интерфейсов, напишите мне @melnik909. Отправлю вам чеклист взамен на ваши деньги.

185

Добавьте background-color, если используется фоновое изображение Кто-то сделал так

.page {
  color: #fefefe;
}

.page__some-way {
  background-repeat: no-repeat;
  background-size: cover;  
  background-image: url("profile-bg.svg");
}

Проблема: Пока фоновое изображение не загрузилось, контент элемента может сливаться с фоном страницы и быть незаметным. Вы увидите белый текст на белом фоне. Я предлагаю делать так

.page {
  color: #fefefe;
}

.page__some-way {
  background-repeat: no-repeat;
  background-size: cover;  
  background-image: url("profile-bg.svg");
  background-color: #222;
}

Решение: Я добавил контрастный цвет к фону с помощью свойства background-color. Теперь контент не может слиться с фоном страницы. Демо: https://codepen.io/ (тут будет ссылка на демо)

185

Посадите медиа-запросы на диету Кто-то сделал так

.intro__heading { 
  font-size: 2rem; 
}

.intro__description { 
  font-size: 0.75rem; 
}

@media (min-width: 641px) {
  .intro__heading { 
    font-size: 3rem; 
  }

  .intro__description { 
    font-size: 1.25rem; 
  }
}

@media (min-width: 1025px) {
  .intro__heading { 
    font-size: 3.5rem; 
  }

  .intro__description { 
    font-size: 1.5rem; 
  }
}

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

.intro__heading { 
  font-size: var(--_heading-font-size, 2rem); 
}

.intro__description { 
  font-size: var(--_hint-font-size, 0.75rem); 
}

@media (min-width: 641px) {
  .intro { 
    --_heading-font-size: 3rem; 
    --_hint-font-size: 1.25rem;
  }
}

@media (min-width: 1025px) {
  .intro { 
    --_heading-font-size: 3.5rem; 
    --_hint-font-size: 1.5rem;
  }  
}

Медиа-запросы очень быстро раздувают код. В результате дофига правил, в которых легко запутаться. Пользовательские свойства позволяют сократить их.

185

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

185

Что за :nth-child(n of S)?

/*
  В чем разница между селекторами?
*/

.highlight:nth-child(n+2) {
  color: green;
}

:nth-child(2 of .highlight) {
  color: red;
}

Псевдо-класс :nth-child учитывает номер элемента в документе. 'of' убирает эту особенность и позволяет выбрать элемент с любым номером.

185

Это пример кейса из моего чеклиста "HTML и CSS техники для улучшения UI/UX". Я собрал 10 кейсов, помогающие пользователям меньше страдать. Техники можно применять на любом стеке и с любым опытом. Я специально не замудривал. В общем, если вы хотите улучшить UI/UX ваших интерфейсов,, напишите мне @melnik909.

185

Добавьте background-color, если используется фоновое изображение Кто-то сделал так

.page {
  color: #fefefe;
}

.page__some-way {
  background-repeat: no-repeat;
  background-size: cover;  
  background-image: url("profile-bg.svg");
}

Проблема: Пока фоновое изображение не загрузилось, контент элемента может сливаться с фоном страницы и быть незаметным. Вы увидите белый текст на белом фоне. Я предлагаю делать так

.page {
  color: #fefefe;
}

.page__some-way {
  background-repeat: no-repeat;
  background-size: cover;  
  background-image: url("profile-bg.svg");
  background-color: #222;
}

Решение: Я добавил контрастный цвет к фону с помощью свойства background-color. Теперь контент не может слиться с фоном страницы. Демо: https://codepen.io/ (тут будет ссылка на демо)

185

Делать?

Anonymous voting

185

Делать вам чеклист с лайфхаками по улучшению UI/UX с помощью HTML и CSS? Продавать буду в районе 1800р - 3000р. Проголосуйте, пожалуйста

185

Можно купить доступ ко всем моим "советам" из этого канала. Нужно написать мне @melnik909 и перевести 2999р. Затем я вас добавлю в закрытый канал, где опубликованы только мои советы. Все 54шт. Платить нужно 1 раз. P.S. Если у вас доход не в рублях, то для вас тоже есть вариант. Тоже пишите.

185

Меняйте значение только в одном месте Кто-то сделал так

.banner {
  height: 2rem;
  position: fixed;
}

.content {
  padding-top: 2rem;
}

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

:root {
  --page-banner-height: 2rem;
}

.banner {
  height: var(--page-banner-height);
  position: fixed;
}

.content {
  padding-top: var(--page-banner-height);
}

При рефакторинге сложно найти все точки, где значение одного свойства зависит от свойств установленных у других элементов. Давайте проще. Пользовательские свойства нам помогут.

185

Как вы думаете, я работаю фронтендером (пишу каждый день код)?

Anonymous voting