Как стать автором
Обновить
42.15

CSS *

Каскадные таблицы стилей

Сначала показывать
Порог рейтинга
Уровень сложности

Путь развития (Roadmap) Frontend разработчика

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 15K

В этой статье вы узнаете про то как я вижу современную и актуальную карту развития frontend разработчика, я расскажу про основные технологии которые необходимы для старта, и как сделать свои первые шаги в frontend разработке.

Читать далее
Всего голосов 21: ↑18 и ↓3 +15
Комментарии 11

Новости

Material for MkDocs 9.5.x — что нового в этой версии и полезные хаки при работе с документацией на нем

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 780

В декабре 23-го года Material for MkDocs обновился до версии 9.5, но из-за регрессов переходить на него многие не решились. Но сейчас версия уже достаточно стабильная и исправленная, поэтому я хотел бы поделиться с вами, что нового привнесла эта версия и какие лайфхаки я применил при переходе на эту версию при работе с документацией (и вам советую перейти также).

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 0

CSS и безопасность данных

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 3.6K

Различные компоненты фронтенда традиционно являются вотчиной веб разработчиков и дизайнеров и они не всегда задумываются о безопасности контента. В этой статье я предлагаю поговорить о безопасности CSS.

Для начала вспомним, что такое кросссайтскриптинг (CSS).  XSS это тип атаки на веб-ресурсы, заключающийся во внедрении в выдаваемую сайтом страницу произвольного кода (который будет выполнен на компьютере пользователя при открытии им этой страницы) и взаимодействии этого кода с веб-сервером злоумышленника.

В течение нескольких лет современные браузеры, такие как Chrome или Firefox, пытались защитить пользователей веб-приложений от различных атак, в том числе XSS. Они делали это с помощью XSS-фильтров, которые во многих случаях позволяли им блокировать такие атаки. Однако эти фильтры оказывались все менее и менее эффективными, и браузеры, такие как Chrome, постепенно отключают их в поисках альтернативных методов защиты. Принцип работы XSS-фильтров довольно прост. Когда ваш веб-браузер отправляет запрос на веб-сайт, его встроенный фильтр межсайтовых сценариев проверяет, есть ли в запросе исполняемый JavaScript, например, блок <script> или HTML-элемент со встроенным обработчиком событий. Также проверяется, есть ли исполняемый JavaScript в ответе от сервера

Теоретически это должно хорошо работать, но на практике это легко обойти, и также нет защиты на стороне клиента от XSS-атак.

Давайте посмотрим, как можно украсть конфиденциальные данные с помощью каскадных таблиц стилей (CSS).

Читать далее
Всего голосов 14: ↑10 и ↓4 +6
Комментарии 5

Дизайн-разбор ссылок в вёрстке

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 7.8K

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.

Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.

Читать далее
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 5

Истории

CSS для печати на бумаге

Время на прочтение 10 мин
Количество просмотров 7.9K

По работе я довольно часто занимаюсь созданием генераторов печати на HTML для воссоздания и замены форм, которые компания традиционно заполняла от руки на бумаге или в Excel. Это позволяет компании переходить на новые веб-инструменты, в которых форма автоматически заполняется по параметрам URL из нашей базы данных, создавая при этом тот же результат на бумаге, к которому все привыкли.

В этой статье я объясню основы CSS, управляющие внешним видом веб-страниц при печати, и дам пару советов, которые могут вам помочь в этом.

Читать далее
Всего голосов 30: ↑29 и ↓1 +28
Комментарии 17

Анатомия StyleX

Уровень сложности Средний
Время на прочтение 16 мин
Количество просмотров 2.6K



Hello world!


По данным 2023 JavaScript Rising Stars библиотека StyleX заняла второе место в разделе Styling / CSS in JS (первое место вполне ожидаемо занял TailwindCSS).


stylex — это решение CSS в JS от Facebook, которое недавно стало открытым и быстро набрало популярность (на сегодняшний день у библиотеки 7500 звезд на Github). Это обусловлено ее легковесностью, производительностью и небольшим размером итоговой таблицы стилей.


В этой статье мы разберемся, как stylex работает. Но давайте начнем с примера ее использования.

Читать дальше →
Всего голосов 15: ↑15 и ↓0 +15
Комментарии 4

Обзор синтаксиса Tailwind CSS

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 5.1K

Салют, Хабр!

Tailwind CSS – это utility-first CSS фреймворк, который отличается от традиционных CSS фреймворков вроде Bootstrap или Foundation тем, что вместо предопределенных компонентов предлагает набор utility-классов, позволяющих стилизовать элементы прямо в HTML.

Utility-first подход заключается в использовании множества функциональных классов, каждый из которых отвечает за одно CSS свойство, к примеру паддинги, маржини и т.п.

В этой статье рассмотрим синтаксис Tailwind CSS, в целом, он похож на дефолт CSS.

Читать далее
Всего голосов 19: ↑15 и ↓4 +11
Комментарии 14

Часы на синусах и косинусах в CSS

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 7K

В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому.


Вот о чём я говорю:


Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 8

Предсказание от We Wizards: сегодня вас ждут успех в делах и новые скиллы

Уровень сложности Средний
Время на прочтение 12 мин
Количество просмотров 577

Вместе с Creative Developer We Wizards Даниилом Сарабьевым сделаем сервис, позволяющий получить случайный набор закрытых таро с возможностью вскрыть выбранные карты.

Читать далее
Рейтинг 0
Комментарии 0

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

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 4.1K


Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • Какие символы нужно пропускать в тексте для атрибута alt.
  • В какой ситуации атрибут inert может быть бесполезен.
  • Как атрибут maxlength не позволил моей знакомой купить авиабилеты.
  • В чём польза свойства border в режиме высокого контраста дисплея.

Давайте начнём!

Читать дальше →
Всего голосов 40: ↑40 и ↓0 +40
Комментарии 14

Не стоит недооценивать HTML

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 22K

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.

И очень часто они вызывали у меня грусть.

Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…

В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Читать дальше →
Всего голосов 66: ↑63 и ↓3 +60
Комментарии 94

Про userstyles (пользовательский CSS): за два дня написал несколько для сайтов, которыми пользуюсь, и доволен (habr too)

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 5.7K

Краткий обзор о том, как изменять внешний вид сайтов - на вашей стороне. Это уже давно можно, называется userstyles - написано для тех, кто еще не знает этого.

Читать далее
Всего голосов 13: ↑10 и ↓3 +7
Комментарии 6

Python для gambling'a. Часть 1 — Сбор данных

Уровень сложности Простой
Время на прочтение 21 мин
Количество просмотров 5.7K

Предисловие

Простой python-cкрипт для парсинга спортивной статистики по баскетболу с популярного сайта

Читать далее
Всего голосов 18: ↑17 и ↓1 +16
Комментарии 6

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

Прокачиваем вёрстку ARIA-атрибутами. Атрибут role

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 3.4K

В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.


Я не буду описывать всё. Атрибут слишком сложный для одной статьи. Остановлюсь на моментах, которые вы можете использовать сразу. Продвинутые техники оставим на другой случай.


Давайте начнём!

Читать дальше →
Всего голосов 38: ↑37 и ↓1 +36
Комментарии 10

11 полезных фичей Chrome DevTools

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 8.2K

Всем привет!

Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.

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

Погнали!

Погнали!
Всего голосов 21: ↑21 и ↓0 +21
Комментарии 2

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 4.7K

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • Какое количество символов следует использовать для текста подсказки для атрибута alt;
  • В чём польза атрибута lang;
  • Почему использование текстовых символов для декоративных задач — это плохая идея;
  • Для чего существует режим повышенной контрастности.

Давайте начнём!

Читать дальше →
Всего голосов 51: ↑51 и ↓0 +51
Комментарии 9

Добавление оффлайн карт с open street map (osm) на web страницу

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 3.1K

Задался я как-то вопросом собрать GPS-ошейник для шерстяного спутника моей жизни, дабы этот кракен сухопутный мог бороздить лесные просторы без особого ущерба для моей нервной системы. Собрать саму “шайтан-машинку” планирую на двух ESP32, двух GPS-модулях NEO-6M и Lora-модулях E22 для дальней связи, чтобы работало везде, всегда и безотказно.

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

И вот, я решил поделиться тем, что нашёл, вразумил и применил.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 19

Вёрстка — это не тупо

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 9.4K

Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.
Мб кому-то этого и не хватало))

Читать далее
Всего голосов 14: ↑12 и ↓2 +10
Комментарии 23

Визуализация алгоритмов поиска пути на Svelte: Практические заметки

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 2.7K

Привет, Хабр! В этом посте делюсь опытом разработки на Svelte, демонстрируя это на моем пет-проекте.

Код проекта: GitHub
Лайв демо: ivan-sem.com

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 11

Как писать более чистый CSS: дюжина советов от банальных до неочевидных

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 15K

Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.

CSS как технология действительно немного раздут, но не так хаотичен и сложен, как его иногда описывают. Просто нужно стремиться к лаконичности - в том числе, с помощью описанных подходов.

Читать далее
Всего голосов 19: ↑19 и ↓0 +19
Комментарии 16

Вклад авторов