![](http://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/hub/20a/faf/e86/20afafe861e9814e46e8a20c8527bd80.png)
CSS *
Каскадные таблицы стилей
- Новые
- Лучшие
- Все
- ≥0
- ≥10
- ≥25
- ≥50
- ≥100
Новости
Разработка настоящих компонентов: блок сообщения Facebook Messenger
Если же вникнуть в тему работы с сообщениями, то окажется, что один только интерфейс чата — это такая штука, при создании которой нужно учесть невероятное количество деталей. Особенно — если это чат некоей платформы, сравнимой по масштабам с Facebook.
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/webt/wq/xh/y1/wqxhy1lskyqccuz69ugst5r4syi.png)
В этой статье я расскажу об устройстве компонента, представляющего собой блок сообщения Facebook Messenger, покажу варианты его стилизации, поделюсь некоторыми интересными находками.
Звёздный рейтинг: решение с использованием SVG
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/10f/9d8/0a4/10f9d80a465d0d5009e043d34c1bd836.jpg)
Для некоторых веб-сайтов и платформ в интернете важно предоставлять пользователям звёздный рейтинг для возможности выставить оценку материалу. Недавно мне довелось реализовать для одного проекта компонент звёздного рейтинга. Я решил использовать SVG и не пожалел об этом. В данной статье будет рассмотрен данный способ реализации и как он работает в разных сценариях
Angular, инкапсулируй это
Добрый день.
В данной публикации хочу рассмотреть механизм работы стилей в Angular, поделится своим опытом и виденьем архитектуры стилей. Понимание этого позволит писать чистый, структурированный и поддерживаемый код стилей.
Если вы ведете разработку на Angular, уверен не раз встречались с ситуацией, когда применение стилей к селектору не давали ни какого эффекта. Часто это решают выносом стилей в глобальные, применение селектора ::ng-deep
или что еще хуже полным отключением инкапсуляции без понимания механизма его работы. В то время как Angular дает мощный механизм по работе с разделением и инкапсуляцией стилей.
Собственно об этом механизме и сценариях его использования поговорим. Но сначала взглянем на классический способ работы со стилями.
ХPath: что нужно делать, а что нет
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/70c/4b4/244/70c4b4244e760179bdf63ed47e5abce0.png)
Привет, Хабр! В прошлый раз мы уже поднимали тему написания селекторов на XPath для автоматизации тестирования веб-сервисов. Сегодня мне хотелось бы поговорить о практиках работы с XPath. Этот пост будет том, какие приемы хорошо работают, а каких вещей лучше избегать, если вы так же как и мы сделали выбор в пользу XPath. Всех заинтересованных прошу под кат, а если у вас есть свои уже проверенные временем ноу-хау, давайте делиться ими в комментариях.
Что нужно знать о вёрстке под ретину
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/e0c/35e/f63/e0c35ef637fd99a2b027c68a8484310d.jpeg)
Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.
Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге.
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами — и ретиновыми в том числе. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе. Об этом и поговорим.
Создание компонента Sidenav
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/2b3/199/07a/2b319907aa873c43e02ca45bf39d72cc.jpg)
В данной статье я хочу поделиться одним из способов создания компонента боковой панели навигации (sidenav), являющегося отзывчивым, поддерживающего навигацию с клавиатуры, работающего как при помощи JavaScript, так и без него, и поддерживаемого всеми браузерами.
Анимация при прокрутке с помощью WAAPI и ScrollTimeline
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/649/707/4eb/6497074ebbd98ac2bf1739e00b36d757.gif)
Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается курс по Frontend-разработке.
Семь простых советов о том, как не надо верстать
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/58e/36c/7fa/58e36c7fa0ab665ecf814b65c5e38317.jpg)
Эта статья является продолжением моего «крестового похода» против ветряных мельниц убогих современных тенденций в разметке и оформлении веб-приложений (статья1, статья2). И, поверьте — солидная ее часть — это толерантная, такая, чтобы никоим образом не нарушить NDA, переработка реального доноса код-ревью кода важного боевого проекта для руководства одной из команд в которых мне приходилось участвовать. До этого момента я породил уже три достаточно злых, токсичных длиннопоста для сообщества, и, о чудо — ни один из них не умудрился скатился в минус (но последний был близок). И на этот раз — я готов! Ибо этот пост именно о тех технологиях и подходах к верстке, которые мне[, конечно же, на основе коммерческого опыта] кажутся весьма неудачными и неэффективными, неадекватными в очень многих ситуациях. Конечно, существуют команды, проекты, требования когда каждый из этих подходов может окажется вполне приемлемым и уместным. Но на деле, чаще всего, имхо, оказывается, что поборники данных методов — безальтернативно «подсаживаются на любимую иглу» и упорно не хотят знать и уметь, использовать ничего другого... Мне вообще кажется что мир вокруг нас сейчас это, утопия, практически целиком, максимально упрощенная тотальным засильем пролоббированного рептилоидами, мировой закулисой корпорациями тоталитарного глобального мейнстрима, и это одинаково касается всех сфер жизни, культуры, вот тут можно почитать мою философскую статью на тему применительно как раз к интерфейсам Куда подевались социальные сети? Пропаганда и реклама вместо общения... И даже наш любимый журнал о технической культуре, по сути, превратился в рекламную помойку, по большей части, унылое отражение глобального общественного тренда... Но, как известно — «главное попытаться», поэтому — поехали!
Дайджест свежих материалов из мира фронтенда за последнюю неделю №492 (1 — 7 ноября 2021)
Стилизация однофайловых Vue компонентов
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/f42/aed/648/f42aed648c1ad37e336b4788c6131545.png)
Если у вас есть опыт написания однофайловых Vue компонентов, вы, вероятно, сталкивались с написанием CSS в своем компоненте. Они позволяют разработчикам группировать код более логическими способами, а не разбивать компоненты по используемому языку (HTML, CSS или JavaScript). Возможность группировать стили компонентов непосредственно рядом с HTML-кодом, к которому он применяется, является одним из основных преимуществ Vue, включая возможность применять CSS к компоненту, чтобы он не влиял на другие части пользовательского интерфейса.
Однако есть ряд функций взаимодействия Vue с CSS, с которыми вы, возможно, не знакомы, например, применение стилей непосредственно к элементам со слотами или новейшие функции, доступные в Vue 3.2. Давайте рассмотрим некоторые из этих других способов стилизации однофайловых Vue компонентов и их преимущества для ваших приложений.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №491 (25 — 31 октября 2021)
Как устроена Дока — опенсорсный справочник с документацией, который сообщество пишет для сообщества
Недавно мы писали про запуск проекта, а в этом посте поговорим подробнее про его устройство. Редакторы Доки рассказали, сколько они работали над проектом, в чём отличия Доки от остальных справочников и почему важно формировать сообщество единомышленников.
Яндекс.Практикум поддерживает работу редакции Доки.
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/webt/6f/4l/xe/6f4lxeed_tcwrc7sp-j8tl3p5mm.png)
Дайджест свежих материалов из мира фронтенда за последнюю неделю №490 (18 — 24 октября 2021)
Типы значений в CSS. Абсолютные, относительные и всякие другие
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/885/bf8/342/885bf8342675ce2a6bc033847d543276.png)
Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em
, rem
, vh
, vw
), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.
Запустилась Дока — опенсорсный справочник по веб-разработке
Это открытый проект, внести вклад в него может каждый. Контент и код Доки лежат на GitHub, правила участия, обсуждения и ревью проходят открыто для всех желающих.
Яндекс.Практикум поддерживает работу редакции Доки.
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/webt/jp/3r/ni/jp3rni2ytpift_qhhakbx9titve.jpeg)
Почему сегодня от CDN больше вреда, чем пользы
CDN(Content Delivery Network) - это подход, позволяющий хранить части страниц вашего сайта на других серверах. Обычно это кастомные шрифты, таблицы стилей, скрипты и иконки. CDN хорош тем, что позволяет кэшировать часто используемые библиотеки типа jQuery, не загружая их заново для каждого сайта. При большом количестве подключаемых файлов на странице, браузер не может делать много запросов к одному домену одновременно. Однако использование CDN, расположенного на другом домене, позволяет обойти эту проблему. На сайтах с огромной посещаемостью CDN позволяет экономить ресурсы серверов. В общем это замечательная технология. А под катом я расскажу, почему первым делом при получении сайта на поддержку, я вырезаю все ссылки на CDN и заменяю их на локальные ресурсы.
Вот почему мы всегда пишем селекторы на XPath
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/bba/d24/23d/bbad2423de09704edba6a987b7dac635.png)
Привет, Хабр! Сегодня хочется поговорить про XPath — мощный и гибкий инструмент для работы с веб-интерфейсами, который при этом почему-то остается не особенно популярным. Статей и мануалов по XPath очень много, и в этом посте я постараюсь рассказать, как мы применяем данный инструмент и почему считаем его более эффективным, чем другие подходы. Если вам знаком термин “селектор”, а тем более — если вы слышали про XPath, добро пожаловать под кат, там много полезного!
Дайджест свежих материалов из мира фронтенда за последнюю неделю №489 (11 — 17 октября 2021)
Разбираемся с цветами, палитрами, фильтрами CSS и не только
![](https://webcf.waybackmachine.org/web/20211114235436im_/https://habrastorage.org/getpro/habr/upload_files/ced/758/551/ced758551d23c95132614174c1c32ead.jpg)
Этот материал — карманный справочник о том, как работать с цветом в CSS и вебе в целом. Он начинается с теоретических основ и содержит множество инструментов и примеров работы с градиентами, анимацией, SVG и не только.
Статья будет полезна и новичку, и специалисту с опытом. За подробностями приглашаем под кат, пока у нас начинается курс по Frontend-разработке.
Вклад авторов
-
alexzfort 8958.0 -
grokru 2491.2 -
ilusha_sergeevich 1780.6 -
alizar 837.8 -
dudeonthehorse 641.0 -
ilya42 500.8 -
Delka 497.0 -
Mithgol 474.0 -
derSmoll 452.0 -
Paul_King 421.0