m1rko 19 июл 2020 в 09:18

Чего я не знал о CSS

6 мин

33K

Веб-дизайн*CSS*

Перевод

+27

Комментарии 30

eandr_67 19 июл 2020 в 14:49

«1ch обычно шире среднего символа обычно примерно на 20−30%»

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

Denai 19 июл 2020 в 16:23

Отступ и заполнение

За что? nth-child ещё напишите как н-й-потомок

НЛО прилетело и опубликовало эту надпись здесь

maggg 19 июл 2020 в 18:41

Я тоже верстаю примерно с 2000 года, и тоже в самом начале просто воспроизводил увиденное. Но с концепциями типа схлопывающихся маржинов, блочных и строчных элементов, можно уж как-то разобраться, даже просто воспроизводя увиденное. Остальные вещи, включая инлайн-блоки, появились значительно-значительно позднее.

maggg 19 июл 2020 в 18:47

И ещё: в большинстве случаев сегодня совершенно необязательно использовать относительные единицы. Пиксели работают хорошо.

megahertz 20 июл 2020 в 08:52

Так и есть. Было актуально в IE, то-ли до 7, то-ли до 8 версии из за особенностей масштабирования.

denisshabr 19 июл 2020 в 20:23

Совершенно не раскрыто, чем же em и rem лучше px. При Ctrl+ всё одинаково увеличивается.

Tangeman 20 июл 2020 в 07:55

Если вам важен точный размер элемента или шрифта на экране, а не только масштабирование, то пиксели не решат этой проблемы — всё будет зависеть от размера и разрешения экрана.

M_Egor 20 июл 2020 в 07:32

Полезная статья для новичков, к счастью про большинство этих нюансов есть толковые видео в ютубе

Faugore 20 июл 2020 в 07:32

Стоило бы уточнить, что nth-of-type работает только с селекторами по тегу

kostrovart 20 июл 2020 в 14:16

Вот за это max-width: 100%; (применительно к img) надо руки отрывать

-2

НЛО прилетело и опубликовало эту надпись здесь

oinovikov 20 июл 2020 в 18:33

Пожалуйста, заклинаю, не делайте никогда так

* {
    box-sizing: border-box;
}

И не советуйте другим.

-2

НЛО прилетело и опубликовало эту надпись здесь

oinovikov 20 июл 2020 в 19:29

В первую очередь, глобальный селектор.

-2

НЛО прилетело и опубликовало эту надпись здесь

oinovikov 20 июл 2020 в 20:19

Так дело вовсе не в скорости.

-2

НЛО прилетело и опубликовало эту надпись здесь

kevin 20 июл 2020 в 23:31

Видимо только масонам доступно.

kai3341 21 июл 2020 в 19:17

Это же элементарно, Ватсон. Неужели вы никогда не подключались к существующему проекту? Обилие таких нюансов ни разу не идёт на пользу скорости погружения нового человека в проект

НЛО прилетело и опубликовало эту надпись здесь

AdskiySiniyBanan 22 июл 2020 в 06:43

Я специально зарегистрировался на хабре чтобы узнать что же с таким написанием не так, не томи, у меня ведь это в каждом проекте с начала карьеры :)

MiXei4 23 июл 2020 в 01:53

так лучше

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Clasen01 27 июл 2020 в 06:24

Точно лучше? И чем же?

AdskiySiniyBanan 4 авг 2020 в 13:48

Я так же могу сказать что лучше не так, какие аргументы в пользу того что так лучше?

jt3k 25 мая 2021 в 07:55

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

Ну и это не по БЭМу, если вы понимаете, что бэм не про нейминг селекторов.