Можете ли вы стилизовать элементы XHTML в другом пространстве имен, используя селекторы идентификаторов и имен классов? - PullRequest
Новая
       15

Можете ли вы стилизовать элементы XHTML в другом пространстве имен, используя селекторы идентификаторов и имен классов?

5 голосов
/ 28 января 2010

Я разрабатываю приложение, которое использует ubiquity-xforms. Ранее я обслуживал страницы как text / html с типом XHTML 1.0.

Если бы я переключил mime-тип на application / xhtml + xml, я бы увидел довольно значительное улучшение производительности, потому что javascript мог бы использовать функции get ____ NS () вместо того, что он делает сейчас (медленно итерируя по всему DOM дерево каждый раз, когда нужно выбрать элемент).

Но когда я попробовал это, куча моих CSS перестала работать. Я заметил, что когда я проверял элементы, либо в Firebug, либо в WebKit Nightly Web Inspector, точкой отказа были селекторы css '.classname' и '#id' для элементов в пространстве имен XFORMS. Я также заметил, что в перечисленных свойствах DOM для этих элементов им не хватало атрибутов 'id' и 'className'.

У меня вопрос: есть ли способ, чтобы я мог заставить UA распознавать их как классы и идентификаторы?

Вещи, которые я пробовал, безрезультатно:

  1. указание атрибутов "id" в качестве идентификатора в ATTLIST встроенного документа
  2. пробовал каждый тип документа, который мог, или вообще не использовал тип
  3. уточнение атрибутов id и имени класса в пространстве имен xhtml (т. Е. Xhtml: id)

Вот некоторый пример xhtml. Не работает ни в Firefox 3.5, ни в Safari 4 / WebKit Nightly 

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xhtml="http://www.w3.org/1999/xhtml"
  xmlns:xf="http://www.w3.org/2002/xforms">
<head>
    <style type="text/css">
    /* <![CDATA[ */
    #test {
        background-color: red;
    }
    .testing {
        color: blue;
    }
    /* ]]> */
    </style>
</head>
<body>
    <xf:group id="test" class="testing">Test</xf:group>
</body>

Ответы [ 3 ]

4 голосов
/ 12 февраля 2010

Фрэнки,

porneL ответ правильный - в режиме XHTML вы должны использовать разные правила CSS, потому что в @id и @class.

нет ничего «особенного».

Даже вооружившись этим знанием, ваши проблемы еще не закончились. :)

Может возникнуть соблазн просто соединить селекторы HTML и XHTML CSS и применить их к одному и тому же правилу: 

@namespace xf url(http://www.w3.org/2002/xforms);

xf\:input.surname, xf|input[class~="surname"] {
  color: green;
}

Однако еще одна проблема заключается в том, что IE игнорирует все правило, поскольку ему не нравится синтаксис XHTML. Так завален Ubiquity XForms, вы увидите такие вещи: 

@namespace xf url(http://www.w3.org/2002/xforms);

xforms\:hint.active, xf\:hint.active {
  display: inline;
}

xf|hint[class~="active"] {
  display: inline;
}

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

Обратите внимание на пару дополнительных вещей:

  • что правила HTML используют ':' в качестве литерального символа (отсюда '\' для выхода) и ничего не знают о пространствах имен;
  • правила CSS XHTML используют оператор '~ =', что означает, что атрибут должен содержать указанное значение, а не быть в точности равным ему.
1 голос
/ 09 февраля 2010

Вам не нужно использовать #id / .class селекторы. Вместо этого вы можете использовать: 

[id=test] {}
[class|=testing] {}

, что эквивалентно.

Класс AFAIK - это вещь, специфичная для HTML, и поскольку пространства имен XML абсолютно безумны, атрибуты XHTML не находятся в пространстве имен XHTML! Тебе, вероятно, не повезло с этим.

Для ID вы можете попробовать xml:id, но я не проверял, поддерживает ли это что-либо на самом деле.

Если вы хотите сопоставить элементы пространства имен, это возможно с Пространства имен CSS : 

@namespace xf "http://www.w3.org/2002/xforms";
xf|group {}
0 голосов
/ 28 января 2010

У вас нет типа документа, кодировки символов и т. Д. Вот и все:

Изменить на это точно: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--Always include character encoding and content-type-->
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>
...