Что !Важно №5: отложенная загрузка iframe, повторяющийся угловой фон и другие CSS-хитрости.

byАфганистан против Канады
Что !Важно №5: отложенная загрузка iframe, повторяющийся угловой фон и другие CSS-хитрости.


Этот выпуск «Что важно» посвящен нашим друзьям в Великобритании (то есть мне), которые в настоящее время переживают ужасные 43 дня дождя. Представляем: пять самых интересных вещей о CSS, которые можно прочитать за последние несколько недель. плюсНовейшие функции Chrome 145 и все, что вы могли пропустить. TL;DR: Много всего, но еще и много дождя.

Почему вы можете программировать только 4 часа в день?

Не волнуйтесь, вы все равно программируете всего 52 минуты в день.

Доктор Милан Миланович рассказывает о разрушительном воздействии совещаний, электронной почты, Slack и перерывов, а также о том, что вы/ваши менеджеры можете с этим поделать. Эта статья действительно открывает глаза и содержит массу шокирующих (но не удивительных) статистических данных о состоянии потока среднего разработчика.

Почему не следует слишком быстро переключаться на меньшие точки останова?

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

Как лениво загружать iframe, расположенный ниже сгиба

loading=lazy Работает только для элементов за кадром, поэтому Стефан Бауэр демонстрирует изящный трюк с отложенной загрузкой над сгибом. использует

.

как сделать повторяющийся corner-shape фон

Прити Сэм рассказывает нам, как использовать corner-shape В s, которые затем используются как повторы backgroundS. Я провел свои собственные эксперименты corner-shapeНо это потрясающе, и я определенно не учел этого.

Выбор CSS (версия 2026 г.)

Что веб-разработчики на самом деле делают с CSS? В то время как другие исследования сосредоточены на функциях, CSS Selection (издание 2026 г.) фокусируется на шаблонах и методах CSS. Это очень интересное чтение, и вы обязательно посмеетесь один или два раза, особенно когда обнаружите в нем разные опечатки. !important.

Вот некоторые из моих любимых:

  • !IMPORTANT: очень крикливый
  • !impotant: слишком много информации
  • !i:он просто ленивый
  • !imPORTANT:отличное объявление
  • !importantl:Ах, очень близко…

Функции Chrome и быстрые советы, которые вы могли пропустить

Chrome 145 вышел несколько дней назад, и, как всегда, на протяжении всей недели мы делились некоторыми новостями. Вы можете найти их на боковой панели главной страницы, так что не стесняйтесь зайти, если вы когда-нибудь окажетесь в «капюшоне».

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

  • text-justifyс которым вы можете совместить text-align: justify Чтобы указать, нужен ли вам интервал между словами (text-justify: inter-word) или межбуквенный интервал (text-justify: inter-character) Текст надо подкорректировать, чтобы он был уместным. Джефф писал об этом в 2017 году, когда это поддерживал только Firefox (что-то вроде…), так что по моим расчетам Safari должен поддерживать это к 2035 году. То есть не в этом десятилетии, а до GTA 6. Шучу… (думаю).
  • Если говорить о расстоянии между словами и буквами, word-spacing И letter-spacing принять сейчас % Единицы измерения, как в Safari и Firefox.
  • Сходным образом, overscroll-behavior Теперь работает для контейнеров прокрутки без полномочий root, таких как Safari и Firefox. WebDev о предупреждении RedFox overscroll-behavior Лучшего времени и быть не могло.
  • column-wrap И column-height Лучшие многоколоночные макеты все еще существуют, но, к сожалению, только в Chrome.
  • Это касается и оптимизации.