Почему в github не работает css

Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

В CSS псевдоэлементы ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку эти элементы, так называемые "замещаемые элементы", специальная категория объектов, описанная в разделе "Рендеринг" стандарта HTML:

Участник CSS Working Group под ником fantasai объясняет это на GitHub:

Например, невозможно использовать ::before для элемента img, чтобы отобразить альтернативный текст (alt) — при этом метод сработает для других элементах (например на параграфе p).

В зависимости от браузера и других факторов, элемент img иногда может быть не замещаемым. Например, если изображение не загружается, у нас появляется возможность добавить ::before и ::after к img (эта возможность есть только в Chrome и Firefox).

Ситуация становится более запутанной, когда дело касается элементов формы. Элементы input и textarea, в настоящее время рассматривается как "частично замещенные" — определение, которое использует Tab Atkins (редактор спецификаций CSS) в обсуждениях Working Group на GitHub.

Так или иначе, возможность добавления ::before и ::after для полей ввода зависит от типа input и используемого браузера. Например, Chrome и Safari поддерживают свойство content для input type="checkbox" и input type="radio".

Если у вас возникли проблемы с использованием ::before или ::after для какого либо элемента, не забудьте проверить, не является ли этот элемент полностью или частично замещаемым элементом.

CSS Введение

Здесь мы покажем одну HTML-страницу с четырьмя различными таблицами стилей. Нажмите на ссылку "Таблица стилей 1", "Таблица стилей 2", "Таблица стилей 3", "Таблица стилей 4 ниже, чтобы увидеть различные стили:

Зачем использовать CSS?

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

CSS решил большую проблему

HTML НИКОГДА не должен содержать теги для форматирования веб-страницы!

HTML был создан для описания содержания веб-страницы, например:

Когда такие теги, как <font> и атрибуты цвета были добавлены в спецификацию HTML 3.2, это стало кошмаром для веб-разработчиков. Разработка крупных веб-сайтов, на которых шрифты и информация о цвете добавлялись на каждую страницу, стала длительным и дорогостоящим процессом.

Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.

CSS удалил форматирование стилей со страниц HTML!

Если вы ещё не знаете, что такое HTML, рекомендуем вам прочитать HTML Учебник на нашем сайте W3Schools на русском.

CSS экономит много работы!

Описания стиля обычно сохраняются во внешних файлах с расширением .css.

С помощью внешнего файла таблицы стилей вы можете изменить внешний вид всего сайта, изменив только один файл css!

Почему position: sticky в некоторых случаях не работает?

Почему position: sticky; не срабатывает? Заметил, что в некоторых случаях работает, а в некоторых нет, но не могу понять почему.

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержит containing block (ближайший предка уровня блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов.

Это значение всегда создает новый stacking context. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow от hidden , scroll , auto , или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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