Рубрика «верстка»
CSS в 2025: какие фишки теперь доступны?
2025-02-11 в 14:01, admin, рубрики: css, ruvds_статьи, web-разработка, верстка, лайфхаки![CSS в 2025: какие фишки теперь доступны? - 1 CSS в 2025: какие фишки теперь доступны? - 1](https://www.pvsm.ru/images/2025/02/12/CSS-v-2025-kakie-fishki-teper-dostupny.jpg)
Привет.
В начале января 2025 года мне захотелось посмотреть, какие новые фишки CSS стали поддерживаться современными браузерами за прошлый год. Провести некий срез, что уже можно использовать. И тут меня посетила мысль: «А почему бы не поделиться новинками на Хабре?». Вот я и пришёл.
Сразу скажу, что эта статья — краткий обзор появившимся возможностей. Моя цель — уведомить вас. Я не буду закапываться в принцип работы и другие нюансы. По этой причине, пожалуйста, воспринимайте эту статью как список, что можно изучить в 2025 году.
Для составления списка я использовал сайт «Can I Use». Брал те новшества, которые стали «зелёными» в 2024 году. Смотрел последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Browser.
Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.
Неизвестно полезный CSS. Часть 7
2025-01-21 в 9:01, admin, рубрики: css, ruvds_статьи, sm909_unknown_css, web-разработка, верстка, лайфхаки![Неизвестно полезный CSS. Часть 7 - 1 Неизвестно полезный CSS. Часть 7 - 1](https://www.pvsm.ru/images/2025/01/22/neizvestno-poleznyi-CSS-chast-7.jpg)
Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
- что вы можете не знать про псевдо-класс
:not()
; - примеры работы псевдо-класса
:has()
, работающие по логике операторов ИЛИ и И; - как неожиданно может повыситься специфичность правила при использовании псевдо-класса
:has()
; - чем полезно свойство
user-select
, кроме отмены выделения текста.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Проектная работа «Оно тебе надо» от Яндекс практикума
2024-12-13 в 19:42, admin, рубрики: css, html, верстка, проектВсем привет, меня зовут Максим. Я начинающий фронтенд разработчик, а также студент Центрального университета. Я обучаюсь фронтенд разработке на Яндекс Практикуме и хочу поделиться опытом разработки первого проекта.
Начало
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»
2024-12-11 в 9:01, admin, рубрики: css, ruvds_статьи, sm909_css_interview, верстка, вопросы и ответы, интервью, псевдо-классы![Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?» - 1 Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?» - 1](https://www.pvsm.ru/images/2024/12/12/gotovimsya-k-voprosam-po-vyorstke-na-intervyu-Frontend-razrabotchika-kakie-znaesh-psevdo-klassy.jpg)
За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвастаюсь. Не было вопроса, на который я не ответил.
Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.
У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.
Сегодня я дам ответ на следующий вопрос: «Какие знаешь псевдо-классы?».
Сравнение: опыт использования typst и LaTeX
Недавно я наткнулся на пост на Reddit, где обсуждались сложности работы с таблицами в LaTeX. Я ответил примерно так: да, таблицы в LaTeX могут быть проблемой, но я решил эту задачу, используя typst для их создания, компиляции и вставки в LaTeX. Это просто, удобно и избавляет от многих трудностей.
Это натолкнуло меня на мысль сравнить typst и LaTeX в целом. Я активно использую оба инструмента на протяжении длительного времени и хочу поделиться своим опытом как пользователь, не углубляясь в технические детали их внутренней реализации.Читать полностью »
Неизвестно полезный CSS. Часть 6
2024-11-19 в 9:01, admin, рубрики: css, ruvds_статьи, web-разработка, верстка, лайфхаки![Неизвестно полезный CSS. Часть 6 - 1 Неизвестно полезный CSS. Часть 6 - 1](https://www.pvsm.ru/images/2024/11/21/neizvestno-poleznyi-CSS-chast-6.jpg)
Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Магия CSS на практике: советы по вёрстке от гика. Часть 5
2024-10-22 в 9:01, admin, рубрики: css, ruvds_статьи, верстка, лайфхаки![Магия CSS на практике: советы по вёрстке от гика. Часть 5 - 1 Магия CSS на практике: советы по вёрстке от гика. Часть 5 - 1](https://www.pvsm.ru/images/2024/10/28/magiya-CSS-na-praktike-sovety-po-vyorstke-ot-gika-chast-5.jpg)
Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Неизвестно полезный CSS. Часть 5
2024-10-16 в 9:01, admin, рубрики: css, ruvds_статьи, web-разработка, верстка, лайфхаки![Неизвестно полезный CSS. Часть 5 - 1 Неизвестно полезный CSS. Часть 5 - 1](https://www.pvsm.ru/images/2024/10/17/neizvestno-poleznyi-CSS-chast-5.jpg)
Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10
2024-09-27 в 6:00, admin, рубрики: accessibility, css, html, ruvds_статьи, верстка![HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10 - 1 HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10 - 1](https://www.pvsm.ru/images/2024/10/01/HTML-i-CSS-oshibki-vliyayushie-na-dostupnost-moi-opyt-i-moego-nezryachego-znakomogo-ili-chast-10.jpg)
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
- Почему в наших дизайн-системах и библиотеках есть сломанные нестандартные радиокнопки;
- Мой способ отказаться от ссылки для изображения с сохранением интерактивности;
- Дублирование стилей при наведении для фокуса вводит меня в ступор;
- Можно ли скрыть кнопку с помощью атрибута
disabled
от скринридера.
Давайте начнём!