2021 отмечает значительный сдвиг в направлении более широкого принятия логических свойств CSS! Недавние выпуски Chrome API вызвали дебаты, управление соотношением сторон SVG предлагает новую гибкость, WordPress приоритет доступной типографии, а разработка CSS Custom Media Запрос остается остановленной. Давайте углубимся в детали.

]

logical CSS: Emerging Default

]

через шесть лет после первоначальной реализации Mozilla логические свойства CSS приближаются к полной поддержке браузера в 2021 году. Firefox, Chrome и последнее предварительное просмотр Safari уже поддерживают свойства и значения, изложенные ниже. Логический CSS упрощает стиль с помощью Shorthands, например margin-inline (комбинирование margin-left и margin-right ) и левый). /* ДО */ основной { Полевая левая: Авто; Право маржи: Авто; } /* ПОСЛЕ */ основной { маржа-вход: Auto; } ] адаптация к макетам с правой к лету (RTL) становится значительно проще. Простой переключатель класса обрабатывает переход, решающий для сайтов, переведенных на языки RTL, такие как арабский, персидский и урду. ] / * Переключить на RTL при переводе */ .translated-rtl { Направление: RTL; } ] веб-сайт Дэвида Бушелла иллюстрирует этот подход, используя класс Google Translate

translated-rtl

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

]

противоречивые API Fugu

]

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

]

] api Webhid:

включает взаимодействие веб -приложения с необычными устройствами интерфейса человека, отсутствующих драйверы ОС (например, Nintendo Wii remote).

Web Serial API:

облегчает общение с байто-битой с периферийными устройствами, такими как микроконтроллеры и 3D-принтеры с помощью эмулированных последовательных соединений.

• Web NFC API: допускает краткосрочное беспроводное чтение/запись в теги NFC.
]
• ] Apple и Mozilla Express, ссылаясь на снятие отпечатков пальцев, безопасность и другие проблемы. Позиция Мозиллы подробно описана на странице их спецификации. ]
svg гибкость:
• reverveaspectratio = ne
по умолчанию, SVG масштабирует при сохранении соотношения сторон. Настройка

reverveaspectratio = "none"

растягивает SVG, чтобы заполнить его контейнер, потенциально искажая изображение. Это может быть полезно для простых декоративных элементов на отзывчивых страницах, таких как границы или диагональные линии, необходимые для заполнения определенного пространства.

]

WordPress: уменьшение курсива для доступности ] , в то время как курсив усиливает акцент, расширенное использование представляет проблемы доступности, особенно для читателей с дислексией. WordPress 5.7 рассматривает это, удалив курсив из описаний, справочного текста и других областей в интерфейсе администратора, чтобы улучшить читаемость. Обновление также заменяет пользовательские веб -шрифты системными шрифтами.

]

CSS Custom Media Запросы: все еще ожидает прогресса ]

@Custom-Media

, предложенное почти семь лет назад, остается неразвитым. Эта функция позволила бы определить многоразовые медиа -запросы, уменьшить дублирование кода и улучшить читаемость.

]

@Custom-Media--Narrow-Window (максимум-шириной: 30ем); @media (--narrow-window) { / * Узкие стили окна */ }

]

, в то время как поддержка браузера неопределенна, официальный плагин PostCSS предлагает немедленные преимущества реализации. Концепция переменных, определенных автором среды, также исследуется, но остается в стадии разработки.

]

@media (max-width: env (-узкий окно)) { / * Узкие стили окна */ } ]