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

CSS *

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

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

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

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

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

Прототип Scribe


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

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

Вскоре после этого я занялся адаптированием Grid под проекты компании, и тут мне почудилось нечто знакомое: я задался вопросом, а не станет ли он решением некоторых проблем, с которыми я столкнулся при разработке Scribe?
Читать дальше →
Всего голосов 43: ↑51 и ↓-8+59
Комментарии13

Новости

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

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

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

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

Читать далее
Всего голосов 7: ↑8 и ↓-1+9
Комментарии4

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

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

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

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

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

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

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

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

Истории

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

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

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

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

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

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

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

Также не спрашивайте, почему выражение justify-content стало justify-items.
Читать дальше →
Всего голосов 185: ↑201 и ↓-16+217
Комментарии54

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

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


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


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


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


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

Читать дальше →
Всего голосов 31: ↑41.5 и ↓-10.5+52
Комментарии3

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

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

Доказано.

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

Читать далее
Всего голосов 21: ↑5 и ↓16-11
Комментарии12

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

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

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

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

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

Читать далее
Всего голосов 7: ↑4.5 и ↓2.5+2
Комментарии13

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

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


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


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

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

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

Читать дальше →
Всего голосов 23: ↑28 и ↓-5+33
Комментарии7

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

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

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

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

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

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

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

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

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

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

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

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


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


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


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


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

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

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

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

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

Читать далее
Всего голосов 30: ↑27 и ↓3+24
Комментарии13

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

One day offer от ВСК
Дата16 – 17 мая
Время09:00 – 18:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Анатомия StyleX

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



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 мин
Количество просмотров6.6K

Салют, Хабр!

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

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

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

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

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

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

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


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


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

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