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

CSS *

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

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

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 2. Финал

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

Привет, дорогие пользователи мира IT!

В современной веб-разработке существует множество способов сделать ваш сайт интересным и привлекательным для пользователей. И даже используя простые техники можно добиться высоких результатов!

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

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

Новости

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 1

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

Привет, дорогие пользователи мира IT!

В современной веб-разработке существует множество способов сделать ваш сайт интересным и привлекательным для пользователей. И даже используя простые техники можно добиться высоких результатов!

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

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

Как сделать свой UI Kit на Vue 3 + storybook и задеплоить его на npm

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

Сейчас очень популярная история создавать свой UI Kit и везде рассказывать какой он крутой и как он ускорил разработку, поэтому я решил написать небольшой гайд, как заиметь себе собственный UI Kit.

После моего туториала, вы тоже сможете рассказывать какой у вас крутой UI Kit, но это не точно :)

Запилить свой UI Kit
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 1

Натальная травматология фронтенда S1 E1-14

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

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

В этом сезоне ко мне на операционный стол попались разные JS, CSS и тест фреймворки да методологии, менеджеры состояний и потоков исполнения, коллекции виджетов и даже приложений. Приготовьтесь, далее вас ждёт целых 32 часа отборного кринжа!

Погрузится в эпидерсию
Всего голосов 42: ↑25 и ↓17 +8
Комментарии 46

Истории

Что нового в Chrome 117?

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 5.3K
Обзор
Перевод

Что ожидается в статье:

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

Вычисление наборов данных более высокого порядка с помощью группировки массивов.

DevTools упрощает процесс локальных переопределений.

И многое другое.

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

Простые правила при работе с растровыми изображениями на каждый день

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

Привет, меня зовут Денис, я руковожу направлением разработки в Домклике. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.

Читать далее
Всего голосов 50: ↑46 и ↓4 +42
Комментарии 21

Типизированные CSS переменные с @property

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

Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем 🙂 .

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

Как HTML и CSS влияют на доступность

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

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.


Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно.

Поехали!

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

Компилирование «железного» бинарника Java-программы Google Closure Stylesheets с GraalVM

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

Google Closure Stylesheets -- это компилятор для CSS, написанный Гугл в рамках набора инструментов Closure для веб-разработки, который в свое время обладал внушительными функциями такими как экспансия браузерных префиксов, переменными и др. Прошло уже более 10 лет с начала этого проекта, и в прошлом году его архивировали. Я же продолжил вести свой форк, и сегодня собрал его как нативный binary с помощью Oracle GraalVM. Под катом рассказ о том, какие моменты пришлось проработать, а так же небольшие бенчмарки.

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

Подборка VS Code-плагинов для Frontend-разработчиков и не только

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

Одним из наиболее ценных аспектов Visual Studio Code является его расширяемость с помощью плагинов, которые значительно облегчают и улучшают рабочий процесс. В этой статье мы собрали инструменты - от простых до продвинутых - которые сделают вашу разработку более продуктивной и приятной, позволяя сосредоточиться на творческой части процесса.

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

Дебаты по Tailwind CSS: ещё один классный инструмент, отвергнутый веб-пуристами

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 4.4K
Обзор
Перевод

Tailwind CSS — как фреймворк для разработчиков довольно прост в понимании. По сути, он позволяет вам встраивать код CSS в ваш HTML код. Чтобы, как говорится в слогане Tailwind: «быстро создавать современные веб‑сайты, не покидая HTML». Таким образом, это избавляет разработчиков от необходимости контекстно переключаться с HTML на таблицу стилей CSS.

Собственная документация Tailwind указывает на распространенное возражение против такого подхода: «разве это не просто встроенные стили?» Те из вас, кто жил в 1990-х годах, наверняка помнят, что когда‑то, еще до того, как произошла революция CSS, им приходилось добавлять разметку стилей в свои HTML‑файлы. Но, по словам Tailwind, его подход «утилитарного класса» предлагает больше функциональности, чем встроенные стили, включая возможность создавать адаптивный дизайн (дизайн, адаптированный для мобильных устройств).

Таким образом, простота использования — особенно по сравнению с кодированием и последующим обслуживанием CSS‑файла — и возможность создавать свой стиль внутри HTML являются основными причинами, по которым многие разработчики любят Tailwind.

В своем посте Мэтт Рикард добавил в качестве ключевых преимуществ фреймворка следующие пункты:

Далее...
Всего голосов 12: ↑10 и ↓2 +8
Комментарии 13

Ох уж эти CSS-переменные

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


Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
Читать дальше →
Всего голосов 56: ↑56 и ↓0 +56
Комментарии 13

Разрабатываем свой браузер. Часть вторая: CSS

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


Всем привет!


Продолжаем цикл статей по разработке браузерного движка.


Да, лучше поздно, чем никогда. Да, перерыв был большой.


В конце статьи я опишу, как поживает проект lexbor, что с ним происходит.


В этой статье я постараюсь раскрыть особенности парсинга Cascading Style Sheets (CSS). Расскажу, как вывернуть «ежа» наизнанку и как тестировать полученный результат.


В CSS спецификациях всё разжевано, ну, или почти всё, тут я расскажу, как всё устроено, куда смотреть и с чего начать.


Эта статья больше обзорная, здесь не будет мелких подробностей реализации, скорее, общие сведения и основные алгоритмы. За мельчайшими подробностями прошу в код на GitHub.


И конечно, как это обычно бывает, мы замахнёмся на звание самого быстрого парсера CSS.

И так, начнём!
Всего голосов 11: ↑11 и ↓0 +11
Комментарии 1

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

Yandex Scale
Дата 25 – 26 сентября
Время 17:00 – 18:00
Место Москва Онлайн
Битва пет-проектов
Дата 25 сентября – 30 ноября
Место Онлайн
Business&IT Day: Retail CPG
Дата 28 сентября
Время 09:50 – 14:00
Место Онлайн
XIX конференция разработчиков свободных программ «Базальт СПО»
Дата 29 сентября – 1 октября
Время 10:00 – 19:00
Место Переславль-Залесский Онлайн
Kokoc Hackathon
Дата 29 сентября – 1 октября
Время 19:00 – 21:00
Место Онлайн
Ruby Russia 2023 Online
Дата 30 сентября
Время 11:00 – 21:00
Место Онлайн
PG Boot Camp Russia 2023
Дата 5 октября
Время 10:00 – 17:00
Место Москва Онлайн
Joker
Дата 9 – 14 октября
Время 16:00 – 19:30
Место Санкт-Петербург Онлайн
Russia Risk Conference 2023 — 19-я конференция по риск-менеджменту
Дата 25 – 26 октября
Время 10:00 – 19:00
Место Москва Онлайн

Вышел Chrome 116

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 5.5K
Обзор
Перевод

Традиционный перевод анонса от команды Google Chrome о нововведениях

• Document Picture-in-Picture API

• Улучшена отладка отсутствующих таблиц стилей в DevTools

• Свойство notRestoredReasons

И многое другое!

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

Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS, PostCSS

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

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...

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

5 новинок CSS в адаптивной верстке, которые можно использовать уже сейчас

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

Hola, Amigos! На связи Игорь Мельников, Frontend-разработчик компании Amiga. Возможно, вы уже слышали про технологии, которые я описываю в статье, но не использовали их, потому что думали, что они не поддерживаются актуальными браузерами. Теперь можете смело брать их во всеоружие и применять в своих проектах! 

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

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

React starter (Webpack + Typescript + Css modules + Jest)

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

Хочу поделиться своим видением сборки для быстрого старта разработки на React.

Помогает быстро запуститься, когда нужно «на скорую» войти в разработку.

Что‑то я подглядел здесь же, на Хабре, к чему‑то пришёл сам, ну и «ангажировал» немного на просторах «необъятного».

Что «под капотом»

Webpack 5
React v.18
Redux (Redux Toolkit)
Typescript
Css modules
Jest
VS Code

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

Работа с Sass в приложении ASP.NET Core

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

Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей (CSS-файлов). Его синтаксис очень похож на обычный CSS, но вдобавок он поддерживает использование переменных, вложенность, миксины и наследование для селекторов, чего очень не хватает в базовом CSS, ведь эти фичи незаменимы в организации и поддержке стилей вашего веб-приложения. В этой статье я продемонстрирую вам шаги, необходимые для добавления и настройки Sass в вашем ASP.NET Core проекте как в Visual Studio, так и в VS Code.

Sass — это инструмент для повышения производительности, который помогает вам выстраивать и поддерживать таблицы стилей. Среди основных его преимуществ можно выделить следующее:

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

Адаптация типографии под пользовательские предпочтения с помощью CSS

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

Способ настройки шрифта в соответствии с предпочтениями пользователей

В данной статье рассматривается применение медиа-запросов CSS с использованием переменного шрифта для более точной адаптации типографии.

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

Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров

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

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

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

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