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

CSS *

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

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

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

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


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


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

Читать дальше →
Всего голосов 22: ↑28.5 и ↓-6.5+35
Комментарии3

Новости

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

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

Доказано.

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

Истории

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

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

Я разработал игру 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 мин
Количество просмотров12K


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


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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Анатомия StyleX

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



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.2K

Салют, Хабр!

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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