Что проблема делает XHTML строгий, решают?

Рассмотрим свойство order схем flex и grid.

В приведенных ниже примерах я сосредоточусь на flexbox, но те же понятия применимы к Grid.


С помощью flexbox можно смоделировать предыдущий селектор сиблинга.

В частности, свойство flex order может перемещать элементы вокруг экрана.

Пример:

Вы хотите, чтобы элемент A загорелся, когда элемент B зависает.

  • A
  • B
blockquote>

ШАГИ

  1. Сделайте контейнер ul гибким.
    ul { display: flex; }
    

  1. Отменить порядок братьев и сестер в надписи.
    • B
    • A

  1. Используйте селектор для подключения к элементу A (~ или +).
    li:hover + li { background-color: red; }
    

  1. Используйте свойство flex order, чтобы восстановить порядок братьев и сестер на визуальном дисплее.
    li:last-child { order: -1; }
    

... и voilà! Предыдущий родитель (или, по крайней мере, имитируемый) родился [или g28]

Вот полный код:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}
  • B
  • A

Из спецификации flexbox:

5.4. Порядок отображения: свойство order

Элементы Flex по умолчанию отображаются и выкладываются в том же порядке, что и в исходном документе. Свойство order можно использовать для изменения этого заказа.

Свойство order управляет порядком, в котором элементы гибкости появляются в контейнере flex, назначая их порядковым группам. Он принимает одно значение , которое указывает, к какой порядковой группе принадлежит элемент flex.

blockquote>

Начальное значение order для всех элементов flex равно 0.

Также см. order в спецификации CSS Grid Layout spec .


Примеры «предыдущих селекторов севера», созданных с использованием свойства flex order.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

Using the flex order property to construct a previous sibling selector

1
2
3
HOVER ME
4

HOVER ME
HOVER ME
6
7
8
10
11

HOVER ME
13
14
15
16
17
18
19
20

jsFiddle


A Side Note & ndash; Две устаревшие убеждения о CSS

Flexbox разрушает давние убеждения в отношении CSS.

Одно из таких убеждений заключается в том, что предыдущий селектор сиблинга невозможен в CSS .

Сказать, что это убеждение широко распространено, было бы преуменьшением. Ниже приведена выборка связанных вопросов только для переполнения стека:

Как описано выше, это убеждение не совсем верно. Предыдущий сингл-селектор может быть смоделирован в CSS с использованием свойства flex order.

Миф z-index

Еще одно давнее убеждение что z-index работает только с расположенными элементами.

Фактически, самая последняя версия spec & ndash; Проект редактора W3C & ndash; все еще утверждает, что это правда:

9.9.1 Определение уровня стека: свойство z-index

z-index

  • Значение: auto | | inherit
  • Начальное: auto
  • Применяется к: позиционированным элементам
  • Inherited: no
  • Процент: N / A
  • Медиа: визуальный
  • Вычисленное значение: как указано

(выделено курсивом)

blockquote>

В действительности, однако, эта информация устарела и неточна.

Элементы, которые являются элементами гибких элементов или , могут создавать (f28) static.

4.3. Элемент Flex Item Z-Ordering

Элементы Flex представляют собой то же самое, что и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и значения z-index, отличные от auto создать контекст стекирования, даже если position - static.

5.4. Z-axis Ordering: свойство z-index

Порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и z-index, отличные от auto, создают контекст стекирования, даже если position - static.

blockquote>

Ниже приведена демонстрация работы z-index над непозиционированными элементами гибкости: https://jsfiddle.net/m0wddwxs/

21
задан Simon 11 November 2008 в 09:15
поделиться

13 ответов

XHTML1 по сравнению с HTML4 и Строгий по сравнению с Переходным являются абсолютно ортогональными проблемами.

XML не мог бы дать огромное преимущество для браузеров сегодня, но на конце сервера это - порядок величины, легче обработать документы с помощью XML, чем попытка проанализировать путаницу, которая является old-school-SGML-except-not-really HTML4.

Ограничение себя к [X] Строгий HTML ничего не достигает сам по себе, кроме просто, что это препятствует использованию старых, менее - удобные в сопровождении методы, которые Вы не должны использовать так или иначе.

Встроенный JavaScript обычно требует, чтобы вложенное множество крыс Escape сделало его совместимым с XHTML

, можно уйти без любых Escape, пока Вы не используете символы < или &. и †˜//< [CDATA [’ не действительно намного хуже, чем †˜<! - ’ был в былые времена.

В любом случае, сохраняя сценарии внешними намного более управляемо; Вы не хотите делать что-либо встроенное значительное.

Тогда существует проблема того, чтобы не быть OCD достаточно на вводе данных пользователем, чтобы удостовериться, что Вы не пропускаете запрещенных символов.

Внеполосные символы точно так же недопустимы в HTML4, Переходном как в Строгом XHTML1.

, Если Вы принимаете отправленный пользователями HTML и не проверяете/выходите его с действительно частым гребнем для предотвращения ошибок отмеченности, у Вас есть намного большие проблемы, чем просто исполнение doctype. Вы будете пропускать инжекционные взломы и делать Ваш сайт уязвимым для дыр в системе безопасности перекрестных сценариев сайта.

упущение гарантировать тип контента, возвращенный из сервера, сбрасывается для страниц XHTML от текста/HTML до application/html+xml.

Это не ‘forgetting’, это является преднамеренным: нет действительно так большого количества точки в обслуживании application/xhtml+xml сегодня. Для составления IE, необходимо осуществить сниффинг UA, и затем удостовериться, что понимаете CSS и различия JavaScript, которые открываются в обоих режимах парсинга..., можно сделать это для доказательства технического мастерства, но это действительно не получает Вас ничто.

Обслуживание XHTML как HTML прежней версии не может быть идеальным, но это позволяет Вам сохранить более простой, более processable синтаксис XML (и потенциальная совместимость с другими языками XML как SVG) все еще будучи благоприятным для браузера.

Люди жалуются на придирчивость ошибок отмеченности, но берущий те ошибки немедленно для Вас для фиксации их путь лучше, чем отъезд их там тихо, готовый сбить с толку некоторый будущий браузер.

23
ответ дан 29 November 2019 в 20:32
поделиться

Это - глобальный стандартный выпуск

, который Это не примерно xHTML, но обо всех стандартах в мире. Необходимо сделать вещи более ясными от версии до версии.

xHTML является квадратным и продвигает кодеры добавлять семантическое значение к коду. Это - полностью совместимый XML и для этого более легко parseable, stylisable, и т.д.

Помнят, что код не только для кодеров, бота для машин также. Через 10 лет люди, создающие браузеры или библиотеки, не захотят реализовывать те же правила комплексов для старой обработки HTML, но будут скорее ожидать что-то максимально чистое.

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

И я не говорю о программах экранного доступа...

Стандарт, прежде всего, о движении к одному уникальному открытому решению, которые соответствуют общей потребности. Не примерно добавляя новые солнечные опции.

-1
ответ дан 29 November 2019 в 20:32
поделиться

XHTML является по определению XML, в отличие от HTML.

Это означает, что можно сделать, броский полезный материал с ним, такой как легко проверяют и анализируют его (так как Вы знаете, что это - XML и таким образом может использовать несметное число доступных инструментов).

кроме того, фанатам нравится делать вещи "более корректными";-)

-1
ответ дан 29 November 2019 в 20:32
поделиться

Лично, мне понравилось понятие XHTML: намного более чистый, чем большая часть HTML мы видим, легче проанализировать и проверить. Как все, я начал кодировать страницы XHTML. BTW, я не вижу проблему со встроенным JavaScript, никакой потребностью в Escape, если Вы помещаете код в CDATA. И IE5, к счастью, немного из среды браузера, как Netscape 4, который вынудил нас записать / > вместо />, вещь, которую я все еще вижу в чистом XML когда-то...

Теперь, я прочитал много статей, как та, связанная Bruno, который имеет партию хороших аргументов против ее использования в большинстве случаев . В основном это говорит, что большинство браузеров не просто готово к строгому XHTML (служил XML), это не имеет большого количества смысла к серверу XHTML как HTML, и так или иначе это не настолько полезно в большинстве сайтов.

Взгляд на аргументы выше: они совершенно допустимы, и замечательно быть в состоянии поместить MathML или SVG непосредственно на странице, преобразовать XML с синтаксическим анализатором XSLT, обработать страницу с синтаксическим анализатором XML.

, Но как часто Вы делаете это? Парсинг страницы чаще всего является проблемой конечных пользователей, которые могут использовать хороший синтаксический анализатор HTML. И, учитывая количество браузеров, которые в состоянии управлять MathML, SVG или XSLT, это - больше потребность в интранет, чем для обширного Интернета.

у Вас могут быть электронная коммерция или блог или форум, который выкладывает хорошие страницы XHTML. И люди, пишущие описания, статьи или сообщения, вставляют <p><p><p> для пропуска некоторых строк, когда это не <p/> или некоторая другая экзотическая конструкция...

я верю в XHTML, но я думаю, что больше не буду использовать его для небольших страниц, которые я делаю для своего сайта. Я буду использовать HTML 4 с правильно написанным кодом (заключенные в кавычки атрибуты, закрывающие тэги даже если дополнительный, и т.д.).
И в конце концов, если W3C работает в HTML 5, это по причине: HTML имеет все еще живое вперед, иначе он был бы уничтожен в пользу XHTML 2.

0
ответ дан 29 November 2019 в 20:32
поделиться

Единственной вещью, которую я видел решенный XHTML, является "проблема" пользователей, использующих Safari: Я не знаю, все еще ли ошибка там, но когда нас в последний раз попросили записать в XHTML, мы натыкались на ошибку, которая сделала XHTML неприменимый с Safari. В XHTML следующий URL не позволяется в тегах привязки, потому что амперсанда не оставляют:

http://www.example.com/page.php?arg1=val1&arg2=val2

поэтому то, что необходимо сделать, заменить его & усилитель; как это:

http://www.example.com/page.php?arg1=val1&amp;arg2=val2

, но Safari преобразовывает & усилитель; к & #38; таким образом, Вы получаете этот URL:

http://www.example.com/page.php?arg1=val1&#38;arg2=val2

... и символ хеша заканчивает URL, насколько PHP затронут. Я знаю, что существуют ужасные взломы, которые позволяют Вам передавать две переменные другими способами, но если XHTML собирается вынудить Вас использовать ужасные взломы, то Вы более обеспечены без него.

0
ответ дан 29 November 2019 в 20:32
поделиться

XHTML имеет преимущества xml. Но тогда почему строгий вариант?

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

0
ответ дан 29 November 2019 в 20:32
поделиться

Строгий предназначается для формализации разделения между содержанием и стилем путем создания более трудным смешать два. У Elliotte Rusty Harold есть хорошая запись на XHTML в одной из его книг, вот соответствующая выборка на' Почему XHTML'.

0
ответ дан 29 November 2019 в 20:32
поделиться

XHTML включает Вам к усовершенствованному рендерингу как SVG (Масштабируемая векторная графика), которая сама является XML, но может легко быть встроена в XHTML посредством расширения пространства имен XML без < embed> или < object>. к сожалению, только Firefox и Safari действительно поддерживают его. Жаль пользователи IE6.

Для больше на SVG в http://en.wikipedia.org/wiki/Svg

2
ответ дан 29 November 2019 в 20:32
поделиться

Необходимо ли проанализировать HTML с программой, o для некоторых тестов? Затем используйте XHTML.

Для всего остального, HTML 4.01 (строгий, свободный, переходный, безотносительно) является "совершенно стандартным" и менее "неприятным".

3
ответ дан 29 November 2019 в 20:32
поделиться

XHTML полезен, потому что намного легче создать простую таблицу стилей преобразования или синтаксический анализатор самокрутки для него, чем это для HTML.

4
ответ дан 29 November 2019 в 20:32
поделиться

XHTML 1.0 Strict пытается решить четыре проблемы:

  1. XML - это технология W3C, а HTML4 не использует ее. Не твоя проблема.

  2. Строгий стремится быть более теоретически чистым, чем переходный, когда дело доходит до презентационализма. Но это не проблема XHTML против HTML .

  3. Анализатор XML предположительно проще. (Не совсем верно; код для работы с частью DTD довольно сложен.) В наши дни у вас есть готовые парсеры XML и HTML , так что это не ваша проблема. (Помимо: , мобильный аргумент является полностью поддельным .)

  4. application / xhtml + xml (хотя и не действительный XHTML 1.0 Strict!) Позволяет смешивать другие словари. Если вы хотите использовать встроенный MathML или SVG сегодня, это основная причина использовать application / xhtml + xml сегодня. Однако направление работы HTML5 позволяет использовать MathML и SVG в text / html.

5
ответ дан 29 November 2019 в 20:32
поделиться

существует большое сообщение об использовании XHTML , Остерегаются XHTML.

Hope это помогает, Bruno Figueiredo

7
ответ дан 29 November 2019 в 20:32
поделиться

XHTML делает HTML ортогональным со всеми другими находящимися в xml структурами в нашей вселенной, которая обладает двумя основными преимуществами.

Шаблоны разработки, которые мы используем имея дело с xml, могут быть применены к HTML.

Программные инструменты так же.

0
ответ дан 29 November 2019 в 20:32
поделиться
Другие вопросы по тегам:

Похожие вопросы: