![](http://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/hub/20a/faf/e86/20afafe861e9814e46e8a20c8527bd80.png)
CSS *
Каскадные таблицы стилей
- Новые
- Лучшие
- Все
- ≥0
- ≥10
- ≥25
- ≥50
- ≥100
Новости
Почему инлайнить стили — плохо
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/1d4/83b/427/1d483b4279a3948a9ba867fde13269a8.png)
CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link
. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.
Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.
Критерии качества вёрстки 2021
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/ad6/5ce/06a/ad65ce06a05349069e84ba2228c0197e.png)
6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.
С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.
Сейчас пришло время обсудить с сообществом обновлённые критерии.
В посте — система, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Приглашаем к обсуждению всех, кто занимается веб-разработкой.
Как я написал веб-синтезатор без сэмплов и зависимостей
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/6a3/011/834/6a3011834bb8b19b837fd111511d51f5.png)
Немного зная теорию музыки, чтобы создать цифровой инструмент, мы можем воспользоваться простыми HTML, CSS и JavaScript без каких-либо библиотек или аудиосэмплов. К старту курса по Frontend-разработке делимся статьёй, автор которой рассказывает, как написать простой, но эффектный синтезатор.
6 хороших практик по HTML и CSS
Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №480 (2 — 8 августа 2021)
Дайджест свежих материалов из мира фронтенда за последнюю неделю №479 (26 — 31 июля 2021)
Свойства блочной модели CSS. Объяснение с примерами
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/da6/fd4/0cc/da6fd40cc3b9707b7d88a30640001681.png)
Приветствую всех жителей хабравиля! Сегодня я подготовил для вас основы по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!
Обнаружение устройств, поддерживающих hover
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/904/19a/55a/90419a55af448cfe594a926dd7b830e5.png)
Сейчас, когда количество устройств стало бо́льшим, чем когда-либо прежде, мы, разработчики, больше не можем полагаться на область видимости, как единственный фактор, определяющий стилизацию сайта. До недавнего времени мы могли отталкиваться от размера устройства: например, считая, что на мобильных устройствах используется сенсорный ввод, а на устройствах с большим экраном — мышь. И на этом основании с помощь медиазапроса определить вариант стилизации содержимого:
Более 15 полезных инструментов для фронтендера с уклоном в CSS
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/978/28f/5b1/97828f5b1f8151713fae3f131ead3019.jpg)
К старту курса по Frontend-разработке делимся переводом подборки различных инструментов: от генератора CSS, который рассчитывает пространство так, что брейкпоинты (контрольные точки) заменяются переменными, до редактора анимации прямо в браузере, а также средства масштабирования для отзывчивости в SVG и даже визуализатора специфичности CSS, который пригодится при анализе больших таблиц стилей. Мы структурировали и, где это было возможно, расширили оригинал, добавив информацию и примеры из репозиториев и официальных описаний инструментов.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №478 (18 — 25 июля 2021)
Создание видео урока по веб программированию с использованием: Jsfiddle, SpeechSynthesisUtterance, OBS Studio
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/56c/d01/a07/56cd01a078c8eaa4e92773ee2891f991.png)
Для демонстрации небольшого объема кода (html, js, css), удобно пользовать онлайн редактором Jsfiddle.
У меня возникла мысль. Как вывести объяснения кода в виде информационных баннеров и озвучить их при помощи SpeechSynthesisUtterance
Мое решение подключить в консоли браузера хром: css, js и создать див с id=”info_mysmx” для отображения текста.
CSS: системные цвета, шрифты и кое-что ещё
color: OldLace;
background: rebeccapurple;
Полагаю, их обычно называют «именованными цветами».
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/webt/vl/zl/si/vlzlsikselv0e7epsqbxir_uhzs.jpeg)
Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:
Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.
Приемы, помогающие упростить CSS
Поддержка CSS может стать настоящей болью при развитии проекта. На моем опыте я выделил для себя несколько приемов, которые помогали мне держать под контролем сложность CSS и не стать хейтером. Надеюсь, они будут полезны и вам.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №477 (12 — 18 июля 2021)
RamblerMeetup&Frontend – уже 29 июля
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/968/eea/28e/968eea28e294cb9244d56a094fca36d1.jpg)
Каждый месяц новый митап!
Готовьтесь к RamblerMeetup&Frontend. 29 июля эксперты в области frontend-разработки поделятся своим опытом и ответят на ваши вопросы.
Митап пройдет в онлайн-формате, начало в 19:00. Обязательна предварительная регистрация на Timepad.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №476 (5 — 11 июля 2021)
Стилизуем слайдер input range для всех популярных браузеров
![](https://webcf.waybackmachine.org/web/20210827230900im_/https://habrastorage.org/getpro/habr/upload_files/fcb/5de/489/fcb5de489e17afa6c7baf1297600aa56.png)
https://toughengineer.github.io/demo/slider-styler
(смотреть лучше на десктопе)
Работает со всеми популярными браузерами.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №475 (28 июня — 4 июля 2021)
Ваше изображение не декоративно
Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.
Вклад авторов
alexzfort 8738.0grokru 2491.2ilusha_sergeevich 1780.6alizar 837.8dudeonthehorse 641.0ilya42 500.8Delka 497.0Mithgol 474.0derSmoll 452.0Paul_King 421.0