CSS *

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

СтатьиПостыНовостиАвторыКомпании

melnik909 14 мая 2024 в 13:00

Неизвестно полезный CSS. Часть 3

Средний

7 мин

14K

Блог компании RUVDS.comВеб-разработка * CSS *

Туториал

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

Сегодня мы рассмотрим:

возможность задать несколько фонов с помощью свойства background;
свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →

+52

lad_habrablog 13 мая 2024 в 10:15

Поле HTML-документа: для чего можно использовать

Средний

8 мин

17K

Блог компании Группа IT-компаний LadCSS * Программирование * HTML * 1С *

Туториал

Привет, Хабр! Меня зовут Стас Ганиев, программист 1С, в статье рассказал о возможностях поля HTML-документа для решения задач в 1С, а также привел примеры реализации. Далеко не все 1С-разработчики знают, как использовать этот элемент диалога.

PatientZero 13 мая 2024 в 07:29

Ищем баги в коде браузера при помощи фаззинга

7 мин

2.9K

CSS * JavaScript * HTML * Отладка * Браузеры

Обзор

Перевод

Наш браузер Ladybird неплохо справляется с качественно отформатированным веб-контентом, но я решил, что будет полезно проверить его инструментами для исследования безопасности. Поэтому сегодня мы воспользуемся Domato 🍅 — DOM-фаззером из Google Project Zero, чтобы провести стресс-тест Ladybird и устранить найденные в процессе ошибки.

Работает это следующим образом: Domato генерирует рандомизированные веб-страницы со множеством по большей части валидного, но странного HTML, CSS и JavaScript. Я загружу эти страницы в отладочную сборку Ladybird и посмотрю, что получится.

+24

ru_vds 6 мая 2024 в 13:00

Записываем музыку при помощи CSS Grid

Средний

8 мин

7.2K

Блог компании RUVDS.comCSS * HTML * Визуализация данных * Звук

Кейс

Перевод

Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!

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

Прототип Scribe

SVG, отрендеренный Scribe 0.2

Несколько лет назад я создал прототип рендерера музыки, который назвал Scribe. Он выполняет преобразование JSON в SVG. Изначально я стремился к созданию адаптивного рендерера музыки. Это было хорошее демо, но для дальнейшего развития пришлось бы писать сложный многопроходный движок генерации макетов, а у меня тогда возникли другие дела.

Вскоре после этого я занялся адаптированием Grid под проекты компании, и тут мне почудилось нечто знакомое: я задался вопросом, а не станет ли он решением некоторых проблем, с которыми я столкнулся при разработке Scribe?

Читать дальше →

+63

olga_c 27 апр 2024 в 12:51

Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны

Простой

4 мин

10K

Блог компании iSpringHTML * CSS * Веб-разработка *

Кейс

Привет! Меня зовут Оля и я расскажу о том, как мы при помощи гибкой вёрстки настроили отображение контента на широких экранах.

Эта статья будет полезна разработчикам веб-сайтов и послужит примером использования CSS при разработке адаптивности сайта для экранов свыше 1921 пикселей.

ENRUStudio 27 апр 2024 в 10:39

Применение ключевого слова revert-layer в CSS

Средний

8 мин

5.1K

Блог компании НетологияВеб-разработка * CSS * HTML * Учебный процесс в IT

Туториал

Перевод

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

Читать дальше →

+16

qmzik 27 апр 2024 в 08:53

Путь к потрясающему CSS Easing с помощью новой функции linear()

Простой

9 мин

5.5K

Веб-разработка * CSS *

Обзор

Перевод

С появлением на горизонте новой CSS функции linear() возможности создания естественных анимаций и переходов в будущем значительно расширяются. В этой статье Джейхи Томпкинс рассматривает текущее состояние CSS easing и демонстрирует, чего можно ожидать от linear(), включая удобные инструменты для работы с ней уже сегодня.

+11

Bright_Translate 26 апр 2024 в 13:00

Сложнейшая проблема компьютерных наук: центрирование

Средний

7 мин

38K

Блог компании RUVDS.comCSS * HTML * Веб-дизайн * Веб-разработка *

Обзор

Перевод

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:

display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого.

Ещё можно использовать сетку:

display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Также не спрашивайте, почему выражение justify-content стало justify-items.

Читать дальше →

+226

melnik909 23 апр 2024 в 13:00

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

Средний

10 мин

12K

Блог компании RUVDS.comCSS * Веб-разработка * Учебный процесс в IT

Обзор

Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»

Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.

Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.

А теперь переходим к статье.

Читать дальше →

+53

gmtd 17 апр 2024 в 05:18

HTML и CSS — языки программирования

Простой

1 мин

7.1K

HTML * CSS * Веб-разработка *

Доказано.

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

-12

samokhvaloff 9 апр 2024 в 13:06

Разработка автоматизированной очереди для сдачи лабораторных работ

Простой

3 мин

2.9K

PHP * CSS * SQL * HTML * Базы данных *

Из песочницы

Учеба в политехе заключается в сдаче лабораторных работ. Буквально. Очень редко бывает такое, что на парах мы чему-то учимся, зачастую все завязано на самообучении. Грубо говоря, вот вам методичка, разбирайтесь сами, через неделю дедлайн.

В связи с этим мы столкнулись с очередями на сдачу этих лабораторных. Сначала просто писали в общий чат, кто каким будет в очереди (например, "я первый", "я вторая", "я третий" и т.д.). Далее решили создать расшаренную таблицу в гугле для формирования очередей. Однако долго она тоже не прожила, так как со временем появились "умники", которые стали ставить себя первыми в очереди, сдвигая остальных вниз. Потом общий доступ для таблицы закрыли, и было принято решение для записи на сдачу писать старосте, он, в свою очередь, будет добавлять студентов в список. Но староста группы не может быть постоянно на связи, иными словами, оперативно добавиться в очередь было просто невозможно.

В связи с этим я задумался над созданием автоматизированной очереди. В качестве стека основных технологий выбрал HTML5+CSS3 для фронтенда, PHP для бэкенда. В качестве СУБД был выбран phpMyAdmin (SQL-DB). В первую очередь, конечно, необходимо было продумать структуру базы данных. Предметная область информационной системы уже была сформулирована: "Очередь на сдачу лабораторных работ с возможностью записи по отдельным дисциплинам, удаления своей записи. Учет истории создания записи, удаления записей, включая время записи. Возможность смены пароля, просмотра профиля." Даталогическая модель БД была построена в MySQL Workbench 8.0 CE в нотации IDEF1X.

melnik909 9 апр 2024 в 09:00

Неизвестно полезный CSS. Часть 2

Средний

7 мин

11K

Блог компании RUVDS.comCSS * Веб-разработка *

Туториал

Сегодня мы рассмотрим:

загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
как с помощью неё же ускорить загрузку страницы;
можно ли использовать нестандартный шрифт без его загрузки;
чем полезен псевдокласс :focus-within при вёрстке кастомных чекбоксов;
мой любимый лайфхак на основе пользовательских CSS-свойств.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →

+33

veseluha 30 мар 2024 в 14:30

Desert Racer: Первая игра, разработанная исключительно на CSS с возможностью управления свайпом

Средний

11 мин

11K

Блог компании BotHubCSS * HTML *

Кейс

Перевод

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

Идеален ли CSS для этой задачи? На данный момент, возможно, нет. Однако CSS начинает заменять некоторые функции обработчиков событий JavaScript. Я надеюсь, что эта статья внесет вклад в продвижение к этой цели. В конце концов, как творческому человеку, мне нравится использовать неподходящие инструменты для создания чего-то, что считается невозможным — это вызов, который я не могу игнорировать. У меня было предчувствие, что это должно работать, и оно оправдалось.

Эта статья предложит вам интерактивный и, надеюсь, вдохновляющий опыт. Приятного прочтения! (По крайней мере, вы можете прокрутить вниз, чтобы посмотреть крутые GIF-анимации)

+26

IT-VAVILON 21 мар 2024 в 17:32

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

Простой

8 мин

22K

Веб-разработка * CSS * JavaScript * ReactJS * TypeScript *

Роадмэп

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

+11

melnik909 19 мар 2024 в 09:00

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

Средний

7 мин

18K

Блог компании RUVDS.comCSS * Веб-разработка * Учебный процесс в IT

Обзор

За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвалюсь. Не было вопроса, на который я не ответил.

Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.

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

Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display?»

Читать дальше →

+55

IT-VAVILON 15 мар 2024 в 14:30

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

Простой

5 мин

63K

CSS * JavaScript * HTML * Веб-разработка *

Роадмэп

Из песочницы

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

+25

akdengi 13 мар 2024 в 16:36

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

Средний

7 мин

2.3K

Блог компании HOSTKEYCSS * HTML * Подготовка технической документации *

Обзор

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

Andrey_Biryukov 12 мар 2024 в 11:37

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

Простой

7 мин

5.5K

Блог компании OTUSИнформационная безопасность * CSS *

Обзор

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

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

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

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

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

ovsyanur 10 мар 2024 в 12:31

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

Простой

8 мин

11K

Веб-дизайн * CSS * Интерфейсы * HTML * Дизайн

Обзор

Из песочницы

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

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

PatientZero 7 мар 2024 в 13:32

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

10 мин

15K

Веб-дизайн * CSS * JavaScript * HTML *

Туториал

Перевод

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

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

+28

1 2 ...

7 8

10 11 ...

114 115

CSS *

Неизвестно полезный CSS. Часть 3

Поле HTML-документа: для чего можно использовать

Ищем баги в коде браузера при помощи фаззинга

Записываем музыку при помощи CSS Grid

Прототип Scribe

Как мы применяем гибкую вёрстку для адаптива страниц под большие экраны

Применение ключевого слова revert-layer в CSS

Путь к потрясающему CSS Easing с помощью новой функции linear()

Сложнейшая проблема компьютерных наук: центрирование

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

HTML и CSS — языки программирования

Разработка автоматизированной очереди для сдачи лабораторных работ

Неизвестно полезный CSS. Часть 2

Desert Racer: Первая игра, разработанная исключительно на CSS с возможностью управления свайпом

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

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

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

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

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

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

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

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

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