CSS *

Разработчик под ником pattespatte представил открытый проект под названием Vanilla CSS Design System. Исходный код решения написан на CSS и JavaScript и опубликован на GitHub под лицензией MIT.

Команда разработчиков объявила о выходе версии 4.0 фреймворка Tailwind CSS.

Tailwind CSS v4.0 — это совершенно новая версия фреймворка, оптимизированная для производительности и гибкости, с переосмысленной конфигурацией и кастомизацией, а также использующая все преимущества последних достижений веб-платформ.

В начале января 2025 года состоялся первый мажорный релиз открытого мультиплатформеного проекта UCM Desktop от разработчиков языка программирования Unison для распределённых систем. Это решение является настольным приложением, сопутствующим UCM CLI aka Graphical UCM. Исходный код проекта написан на Elm и CSS и опубликован на GitHub под лицензией MIT.

Веб‑разработчик Jane Ori опубликовала на codepen.io демонстрацию хака под названием «100% CSS (без JavaScript) — получить IP‑адрес пользователя на :root».

Не успеваете следить за последними новинками и трендами веб технологий? Этот адвент-календарь идеально подойдет для того, чтобы изучить и попробовать новые возможности CSS и JavaScript, появившиеся за последние годы.

Пробежимся по самому интересному.

Для тех, кто не курсе что это вообще такое. State of CSS - это ежегодный опрос разработчиков со всего мира о последних тенденциях CSS

Фичи:

Новость
Это должно было когда то случится, вслед за разработкой нативного элемента popover, в 150й версии Chrome Canary появился запрос на обратную связь по элементу Select, у которого можно полностью изменять выпадающий элемент.

Элемент будет состоять из следующих частей, представленных на картинке:

Фронтенд-инженер, бывший сотрудник Google и Miro Йенс Оливер Мейерт провёл исследование, которое показало, что 199 из 200 самых популярных веб-сайтов используют неработающий HTML.

Разработчик Деннис Морелло представил онлайн-проект Windows 98 Disk Defrag Simulator, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD. На сайте defrag98.com можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98.

В Microsoft Edge обновили настройки стилей веб-сайтов в зависимости от предпочтений пользователя в отношении цвета и контрастности в Windows. 

Открыт бесплатный доступ к обучающему опросу для веб-разработчиков под названием State of HTML 2023. Автор текущей версии проекта программист Леа Веру (Lea Verou, в GitHub — LeaVerou) пояснила, что вставила в опрос информацию о 131 новой фиче и нестандартных реализациях (от контента до UX и не только) в рамках создания веб-сайтов, работы с веб-ресурсами и веб-приложениям. Опрос можно проходить анонимно как гость без регистрации на сайте.

Mozilla представила платформу MDN Playground, предназначенную для предварительного просмотра HTML, CSS и JavaScript в браузере. Пользователи могут делиться сниппетами кода и использовать их для демонстрации примеров в документации.

Хокон Виум Ли — создатель каскадных таблиц стилей (CSS), в сотрудничестве с Тимом Бернерсом-Ли и Робертом Кайо. Он внес значительный вклад в веб-стандарты и развитие Интернета, работал в CERN и Opera Software. 

Evrone поговорил с Хоконом о будущем интернета, метавселенной и его хобби. Здесь мы приводим интересные цитаты, а полную версию интервью можно посмотреть здесь. 

Google объявила, что выпустила бета-версию Chrome 113 с поддержкой новых мультимедийных функций CSS, WebGPU и API. Тестовые версии доступны для Windows, macOS, Linux, Android и iOS.

Состоялся релиз фреймворка Electron 24.0.0. Кодовая база теперь основана на Chromium 112, Node.js 18.14.0 и JavaScript V8 11.2. Сам фреймворк позволяет разрабатывать настольные графические приложения с использованием веб-технологий.

Разработчики выпустили релиз платформы Electron 24.0.0, которая позволяет разрабатывать кроссплатформенные приложения и использует в качестве основы компоненты Chromium, V8 и Node.js. Её обновили до кодовой базы Chromium 112, платформы Node.js 18.14.0 и JavaScript-движка V8 11.2.

Google выпустила обновление браузера Chrome 112. Разработчики добавили поддержку препроцессорных правил вложения CSS-селекторов и обновили алгоритм фокусировки в элементах с тегом <dialog>. Новая версия браузера уже доступна пользователям и разработчикам.

За 3 месяца студенты научатся превращать дизайн в код, создавать сайты с нуля и понимать визуальную часть пользовательского интерфейса. Узнают о современных стандартах HTML и CSS и инструментах для профессиональной вёрстки, например, Git, Node.js, PostCSS.

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

Готовьтесь разнообразить свою веб-разработку с помощью последнего релиза Tailwind CSS v3.3! Это обновление предлагает обширную палитру цветов, которая удовлетворит даже самых искушенных дизайнеров. Но это еще не все - наслаждайтесь новой поддержкой ESM/TS, которая сделает ваш рабочий процесс более гладким, чем шелк. И, как если бы этого было мало, теперь вы можете насладиться превосходными свойствами и другими вкусными функциями, которые поднимут ваш веб-сайт на новый уровень. Не упустите этого вкусного обновления - ваши вкусовые рецепторы (и клиенты) будут благодарны вам!

Для начала обновим существующую версию Tailwind до последней:

npm install -D tailwindcss@latest

С новой версией вы можете создать файл конфигурации для TS (или ESM):

npx tailwindcss init --ts

Теперь добавим в палитру красок: к каждому цвету добавлены темные оттенки с индексом -950:

<span class="font-bold text-slate-950">-950 оттенков</span>

Для тех, кто использует опции языка RTL и LTR, жизнь станет проще благодаря тегам ms-3 (margin start) и me-3 (margin end). Те же свойства были добавлены к start-, end-, padding, rounded, border и scroll.

JetBrains выпустила обновление WebStorm 2023.1. Теперь IDE поддерживает работу с фреймворком Astro, Tailwind CSS и с TypeScript в Vue-шаблонах. Новая версия среды разработки уже доступна на сайте компании и в JetBrains Toolbox.