Вход

Просмотр полной версии : Атрибуты с префиксом в CSS. Совсем нельзя?

voraa
04.01.2022, 13:48
У атрибутов элементов может быть префикс
Типа
<time ip:alive>
Js нормально отрабатывает (пишет, читает) такие атрибуты
А в CSS никак


time[ip:alive] {
....
}
Никак не отрабатывает.
Аналогично querySelector('time[ip:alive]') орет матом

Никак нельзя? Или какой то особый синтаксис для этого есть?
ksa
04.01.2022, 14:19
Никак нельзя?
В селекторах двоеточие используется как разделитель, для псевдоэлементов.
Белый шум
04.01.2022, 14:31
Просто двоеточие нужно экранировать:

<head>
<style>
time[ip\:alive] {
color: green;
}
</style>
</head>
<body>
<time ip:alive>
Js нормально отрабатывает (пишет, читает) такие атрибуты
<br>А в CSS никак
</time>
<script>
console.log(document.querySelector('time[ip\\:alive]').attributes);
</script>
</body>
voraa
04.01.2022, 14:55
Вау! Здорово!
Мне попадалась такая конструкция тут
https://oreillymedia.github.io/Using_SVG/extras/ch03-namespaces.html
Но там же все больше пишут про конструкцию вида [ip|alive], которая почему то ни фига не работает.

На mdn тоже только какие то не внятные слова про | находил
https://developer.mozilla.org/ru/docs/Web/CSS/@namespace
voraa
04.01.2022, 15:15
Где на MDN об этом почитать?

https://developer.mozilla.org/en-US/docs/Web/API/Attr/prefix
voraa
04.01.2022, 15:17
Ну это опять XHTML.
Да хрен с ним. Лишь бы работало
В html с <!DOCTYPE html> работает, и хорошо.
voraa
04.01.2022, 17:17
А смысл в нем если он в html всегда null?
В чем и кто null?
Aetae
04.01.2022, 21:45
voraa,
Note: Only XML supports namespaces. HTML does not. That means that the prefix of an attribute of an HTML element will always be null.

В html с <!DOCTYPE html> работает, и хорошо.
Даже если оно работает - оно может в любой момент перестать. Использовать недокументированные возможности без очень серьёзной причины - не стоит.
voraa
04.01.2022, 22:04
Ну хорошо, пускай это не префикс, а просто имя такое. Разрешенное!
Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), U+003E GREATER-THAN SIGN (>), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) characters, the control characters, and any characters that are not defined by Unicode. In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that are an ASCII case-insensitive match for the attribute's name.
https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#attributes-0

Важно было, как задать это в CSS.
Экранировка доставляет удовольствие.
Если просто в CSS так
time[ip\:alive] {
color: green;
}

В js так
document.querySelector('time[ip\\:alive]')

А в js в строке, которую потом загонять в элемент style так
const tymestyle =`
time[ip\\\\:alive] {
color: green;
}`;
voraa
05.01.2022, 15:42
Там любой атрибут (не обязательно с : ), который не предназначен для данного тега вызывает ошибку.
ksa
05.01.2022, 15:58
voraa, пробовал такие?
<p data-test='пример'></p>
voraa
05.01.2022, 18:09
пробовал такие?
Как разработчик, я тоже за стандартные атрибуты.
Но не все от меня зависит.
Заказчики уже много лет используют нестандартный атрибут href у <cite>
И ничего, живут как то.
Сейчас идет просто некоторая доработка и расширение (с упрощением) проекта. Обсуждаются разные варианты.
Дело в том, что там большая часть документов вручную переводится из Ворда или png в html.
Как они скажут, что им проще, так и будет.
ksa
05.01.2022, 20:21
Это напоминает старый принцип - зачем просто, когда можно сложно.
voraa
05.01.2022, 20:40
зачем просто, когда можно сложно.
А что сложно, что просто?
Вот то же пресловутый <time>, с которым я сюда прибежал.
Конечно нужно писать так

<time class="alive" data-href="url..."></time>

Но ктото предложил, что может быть можно и так. Так проще

<time ip:alive ip:href="url..."></time>

Ну хочется им, почему не попробовать, если они считают, что так проще.
ksa
05.01.2022, 20:43
Но ктото предложил, что может быть можно и так. Так проще
Проще - это без дальнейших проблем.

Ну хочется им, почему не попробовать, если они считают, что так проще.

Что же вы так убиваетесь?
Вы же так не убьетесь! :D

Т.ч. пусть придумают что-то позаковыристее, чтобы у браузеров вообще крышу сносило!
Aetae
05.01.2022, 20:57
voraa, твоя задача убедить их что проще - по-нормальному, потому что если новый сотрудник придёт ему не придётся разбираться в магии.
Если хочется универсальности, так тоже боль-мене нормально:
<time data-alive data-href="url..."></time>
Если хочется разных префиксов, не проблема:
<time data-ip-alive data-ip-href="url..."></time>