CSS *

Привет, Хабр!

Следя за развитием HTML и CSS, очень сложно запомнить всё. Я заметил это, ведя свой канал и общаясь с коллегами. Многие люди не знают про возможности HTML и CSS, которые были внедрены в браузеры 6 лет назад или раньше.

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

Давайте посмотрим, что я подготовил.

Вы, наверное, никогда не обращали внимания на такую мелочь, но в вашем браузере есть заранее определённые цвета, которые являются не тем, чем кажутся. Если бы я сказал вам, что названия образцов выше это LightGray, Gray и DarkGray, какому бы из цветов вы сопоставили каждое название?

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Сколько раз уже писано-переписано о том, что современные печатные книги на компьютерную тематику — это на редкость некачественный товар. И всё равно каждый раз я не перестаю удивляться, как же их создатели не стыдятся выпускать, да ещё и продавать за деньги такой редкостный треш.

И дело даже не в кривом переводе. Мы уже давно научились догадываться, что именно «хотел сказать автор» на языке оригинала. Этот этап повсеместного падения качества книг уже пройден. Теперь издательства нацелились на новые антирекорды — соревнуются, кто кого переплюнет по количеству фактических ошибок в своих творениях. Например, по ужасающим косякам в исходных кодах примеров программ. Каждый раз хочется воскликнуть: «Ребята, вы сами-то хоть один раз перечитали своё творение?!»

Привет, Хабр!

Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.

Давайте посмотрим, что я вам подготовил.

Сервисы и инструменты

img:not([width]):not([height]) {
  border: 2px solid red !important;
}

Это статья — список полезных мелочей. Весь текст поделен на две части. Первая рассказывает про простые элементы (текст, кнопки, изображения, формы и другие), вторая часть про производительность, масштабируемость, безопасность и доступность.

Когда использовать width / height равный 100%?

Height: 100%

Пандемия, осеннее обострение, зима близко и QR коды на каждом шагу, роботы наступают, рутина работы затягивает. Хочешь покушать покажи картинку. Скучную и квадратную, для робота, не для человека.