Url css: url() — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

CSS для URL-адресов и заголовков HTTP

Когда вы просматриваете веб-страницу, под ней находится DOM:

Как нам получить DOM? Браузер знает, как создать его из HTTP-запроса, состоящего из URL, некоторых заголовков и некоторого HTML. Например, это упрощенное представление (начала) веб-страницы для www.jim-nielsen.com.

> GET / HTTP/2
> Host: www.jim-nielsen.com
> 
< HTTP/2 200 
< content-type: text/html; charset=UTF-8
< date: Tue, 15 Nov 2022 19:47:19 GMT
< content-length: 475979
< 
<!DOCTYPE html>
<html lang="en">
  <head>…</head>
  <body>…</body>
</html>

Обратите внимание на различные фрагменты информации, запутанные в этом HTTP-запросе: URL-адрес, некоторые заголовки и немного HTML. Браузер знает, как взять всю эту информацию и отобразить ее в виде веб-страницы.

HTML — это обычно то, о чем мы думаем, когда используем CSS для оформления веб-страницы (например, «если есть элемент с классом .

foo, сделайте текст color: red»). Однако при оформлении веб-страницы может быть полезно нечто большее, чем просто информация в HTML. HTTP-запрос содержит соответствующую информацию, такую как URL и заголовки, которые у нас нет возможности запросить и логически применить на основе стилей.

Я полагаю, вы можете сделать это сегодня, по крайней мере, частично, с помощью чего-то вроде псевдокласса :target, который позволяет вам настраивать таргетинг и стилизовать определенный элемент в DOM на основе значения фрагмента в URL (осторожно: у него есть свои причуды, такие как history.pushState, не влияющие на :target стили).

Там может быть информация, критически важная для оформления веб-страницы, которая существует за пределами только HTML. Весь HTTP-ответ остается недоступным для CSS. И почему? Что, если бы вы могли написать селекторы на основе любой части информации в HTTP-ответе?

Селектор URL: Правило @document

Оказывается, в CSS3 есть/было предложено правило @document, — предложенное в CSS3, отложенное до CSS4, кажущееся устаревшим сейчас — который позволяет вам писать стили, применимые к указанным URL (адресам).

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

/* Only apply these to the specified URL */
@document url("https://blog.jim-nielsen.com/about/") {
  body {…}
}

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

/* Apply these to all URLs that start with 'https:' */
@document regexp("https:.*") {
  body {…}
}

Регулярные выражения — это здорово, но насколько они доступны многим людям? И хотя предлагается @document url-prefix(), это заставляет задуматься: «А как насчет

@document url-prefix()?» И ничто из этого, не касается того, как создавать стиль на основе параметров запроса (для этого и предназначено регулярное выражение?).

Часто задается вопрос, не могли бы мы вместо этих перечисленных функций (url(), url-prefix(), domain(), regex()) использовать существующую идиому селекторов атрибутов CSS? Как же будет выглядеть синтаксис, если представить это в качестве примера:

/* URL matches exactly */
@document[url="https://blog. ="https:"] {…}
/* URL ends with */
@document[url$=".php"] {…}
/* Domain is */
@document[domain="jim-nielsen.com"] {…}
/* Domain is AND URL ends with */
@document[domain="jim-nielsen.com"][url$=".html"] {…}

HTTP Selector

Никто не запрашивал CSS-селекторы, которые могут запрашивать HTTP-заголовки. Вероятно, для этого есть причины.

Оставляя в стороне неограниченные возможности, которые люди могут придумать с нестандартными X-заголовками, представьте, что вы можете объявлять некоторые стили на основе наличия файла cookie. Файлы cookie интересны тем, что они представляют собой часть состояния, устанавливаемого сервером и отправляемого клиентом при каждом последующем запросе — JavaScript не требуется.

Это может быть невероятно полезно для поддержки варианта использования, такого как настраиваемый пользователем темный режим без FART на хосте со статическими файлами. Вы отправляете пользователя на соответствующий URL-адрес, сервер устанавливает файл cookie, и теперь у вас есть часть состояния, которую может запросить CSS. Нет необходимости переписывать HTML-функции Edge, не обнаруживаются неточные цветовые темы и не требуется клиентский JavaScript. Пример CSS:

 
/*
Imagine some HTTP response headers like this:
< HTTP/2 200 
< set-cookie: THEME=dark; path=/; domain=…
And you style based on that!
*/
/* Light mode */
:root { background: #fff }
/* Dark mode via system preference */
@media (prefers-color-scheme:dark) {
  :root { background: #000 }
}
/* Or dark mode via user preference  */
:http([set-cookie*="THEME=dark"]) {
  :root { background: #000 }
}

Свойство CSS: содержимое: `url()` | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Свойство CSS: содержимое: `url()`

  • Глобальное использование
    97,23% + 0% «=» 97,23%
IE
  1. 6–7: не поддерживается
  2. 11% — Supported»> 8–10: поддерживается
  3. 11: поддерживается
Edge
  1. 12 — 112: Поддерживается
  2. 113: Поддерживается
Firefox
  1. 2 — 112: Поддерживается
    2. 90 039 113: Поддерживается
  2. 114 — 115: Поддерживается
Хром
  1. 4 — 112: Поддерживается
  2. 113: Поддерживается
  3. 114–116: Поддерживается
Safari
  1. 3.1–16.3: Поддерживается
  2. 16.4: Поддерживается 9 0014
  3. 16.5 — TP: поддерживается
Opera
  1. 83% — Supported»> 10–97: Поддерживается
  2. 98: Поддерживается
Safari на iOS
  1. 3.2–16.3: Поддерживается
  2. 16.4: Поддерживается 9001 4
  3. 16.5: поддерживается
Opera Mini
  1. все: поддержка неизвестна
Браузер Android
  1. 2.1–4.4.4: Не поддерживается
  2. 113: Поддерживается
Opera Mobile
  1. 12–12.1: Не поддерживается 9001 4
  2. 73: поддерживается
Chrome для Android
  1. 113: поддерживается
Firefox для Android
  1. 29% — Supported»> 113: поддерживается
UC Browser для Android
  1. 13.4: поддержка неизвестна
Samsung Internet
  1. 4–19.0: поддерживается
  2. 20: Поддерживается
Браузер QQ
  1. 13.1: Поддержка неизвестна
Браузер Baidu
  1. 13.18: Поддержка неизвестна
    2. 9002 5
    Браузер KaiOS
    1. 2.5: поддержка неизвестна
    2. 3: поддержка неизвестна

    CSS для URL-адресов и заголовков HTTP

    У меня в голове крутится пара вещей:

    • Сообщение Криса Койера о flash of inac Кураторская цветовая тема (FART) становится официальный термин.
    • Сообщение Джейсона Ленгсторфа о том, как добиться переключателя тем без вспышки неточных цветов с помощью граничных функций Netlify.
    • Мой пост о запросах зависимостей npm и их специальном синтаксисе селекторов, таком как :semver() псевдокласс

    Все это заставило задуматься…

    Когда вы смотрите на веб-страницу, внизу у вас есть DOM:

    Упс, неправильный DOM. Вот так (изображение любезно предоставлено Википедией).

    Как получить DOM? Браузер знает, как создать его из HTTP-запроса, состоящего из URL-адреса, некоторых заголовков и HTML-кода. Например, это упрощенное представление (начало) веб-страницы для www.jim-nielsen.com .

     > ПОЛУЧИТЬ / HTTP/2
> Хост: www.jim-nielsen.com
>
< HTTP/2 200
<тип содержимого: текст/html; кодировка = UTF-8
<дата: вторник, 15 ноября 2022 г., 19:47:19 по Гринвичу
<длина содержимого: 475979
<


  <голова>…
  <тело>…

    Обратите внимание на различные фрагменты информации, запутанные в этом HTTP-запросе: URL-адрес, некоторые заголовки и немного HTML.

    Браузер знает, как взять всю эту информацию и отобразить ее в виде веб-страницы.

    Обычно мы думаем о HTML, когда используем CSS для оформления веб-страницы (например, «если есть элемент с классом .foo , сделайте текст цветом: красный »). Однако при стилизации веб-страницы может быть полезна не только информация в HTML. HTTP-запрос содержит соответствующую информацию, такую ​​как URL-адрес и заголовки, которые мы не можем запросить и логически применить на основе стилей.

    Я полагаю, вы можете сделать это сегодня, по крайней мере в небольшой части, с чем-то вроде :target псевдокласс, который позволяет нацеливать и стилизовать определенный элемент в DOM на основе значения фрагмента в URL-адресе (остерегайтесь: у него есть свои особенности, такие как history.pushState, не влияющие на

    :target стили).

    Моя точка зрения такова: может быть информация, важная для стиля веб-страницы, которая существует за пределами одного только HTML. Весь ответ HTTP остается недоступным для CSS. Почему это? Что, если бы вы могли написать селекторы на основе любой части информации в ответе HTTP?

    Селектор URL: Правило @document

    Оказывается, существует/было правило @document — предложенное в CSS3, отложенное до CSS4, кажущееся устаревшим сейчас? — который позволяет вам писать стили, применимые к указанным URL-адресам. Это было бы здорово для написания пользовательских стилей для предметной области, а также (я думаю) для авторских стилей.

     /* Применить только к указанному URL */
URL-адрес документа ("https://blog.jim-nielsen.com/about/") {
  тело {…}
}

    Предлагаемый синтаксис позволяет сопоставлять правила на основе значения URL-адреса, префикса или домена. Если этого недостаточно, есть способ сопоставления на основе регулярного выражения.

     /* Применить ко всем URL-адресам, начинающимся с https: */
@документ регулярное выражение("https:.*") {
  тело {…}
}

    Регулярные выражения — это прекрасно, но интересно, насколько они доступны многим людям? И хотя предлагается @document url-prefix() , вы задаетесь вопросом: «А как насчет @document url-suffix() ?» И ничто из того, что я видел, не касалось того, как стилизовать на основе параметров запроса (полагаю, для этого и нужны регулярные выражения?).

    Часть меня задается вопросом, если вместо этих перечисленных функций ( 9=»https:»] {…} /* URL-адрес заканчивается на */ @document[url$=».php»] {…} /* Домен */ @document[domain=»jim-nielsen.com»] {…} /* Домен — это И URL заканчивается на */ @document[domain=»jim-nielsen.com»][url$=».html»] {…}

    Конечно, я тут плююсь, но для этого и нужны сообщения в блогах.

    Селектор HTTP…?

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

    Если оставить в стороне неограниченные возможности, которые люди могут придумать с нестандартными X-, представьте, что вы можете объявить некоторые стили на основе наличия файла cookie. Файлы cookie интересны тем, что представляют собой часть состояния, устанавливаемую сервером и отправляемую клиентом при каждом последующем запросе — JavaScript не требуется!

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *