Почему CSS работает с поддельными элементами?

Ответ 1

Почему CSS работает с поддельными элементами?

(Большинство) браузеров предназначены для (в некоторой степени) совместимости с будущими дополнениями к HTML. Неопознанные элементы анализируются в DOM, но не имеют семантики или специализированного рендеринга по умолчанию, связанного с ними.

Когда в спецификацию добавляется новый элемент, иногда CSS, JavaScript и ARIA могут использоваться для обеспечения одинаковой функциональности в старых браузерах (и элементы должны появляться в DOM для того, чтобы эти языки могли манипулировать ими добавьте эту функциональность).

(Хотя следует отметить, что в настоящее время ведется работа по определению средства расширять HTML с помощью пользовательских элементов, но эта работа находится на ранних стадиях разработки в настоящее время поэтому его следует избегать, пока он не созрел.)

Почему мой профессор не хочет, чтобы я использовал составленные элементы?

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

Также; почему он не знал, что созданные элементы существовали и работали с CSS. Являются ли они необычными?

Да. Люди не используют их, потому что у них есть вышеуказанные проблемы.

Ответ 2

TL; DR

• Пользовательские теги недействительны в HTML. Это может привести к возникновению проблем.
• Делает дальнейшее развитие сложнее, поскольку код не переносится.
• Valid HTML предлагает множество преимуществ, таких как SEO, скорость и профессионализм.

Длинный ответ

Есть некоторые аргументы, что код с настраиваемыми тегами более полезен.

Однако это приводит к недопустимому HTML. Что плохо для вашего сайта.

fooobar.com/questions/16178/...

• Google предпочитает это, так что это хорошо для SEO.
• Это делает вашу веб-страницу более вероятной для работы в браузерах, которые вы не тестировали.
• Это заставляет вас выглядеть более профессионально (по крайней мере для некоторых разработчиков).
• Совместимые браузеры могут отображать [действительный HTML быстрее]
• Он указывает на кучу неясных ошибок, которые вы, вероятно, пропустили, которые влияют на вещи, которые вы, вероятно, не тестировали, например. код или языковой набор страницы.

Зачем проверять | W3C

• Проверка как инструмент отладки
• Валидация как проверка качества в будущем
• Проверка упрощает обслуживание
• Валидация помогает преподавать хорошие практики.
• Валидация - признак профессионализма.

Ответ 3

YADA (еще один (другой) ответ)

Изменить: см. комментарий от BoltClock ниже относительно типа vs tag vs element. Я обычно не беспокоюсь о семантике, но его комментарий очень уместен и информативен.

Хотя уже есть куча хороших ответов, вы указали, что ваш профессор предложил вам опубликовать этот вопрос, чтобы он казался вам (формально) в школе. Я думал, что я расскажу немного подробнее о не только CSS, но и о механизме веб-браузеров. Согласно Wikipedia, "CSS - это язык таблиц стилей, используемый для описания... документа, написанного в a язык разметки." (Я добавил акцент на "а" ). Обратите внимание, что он не говорит "написано в HTML" гораздо менее конкретной версией HTML. CSS можно использовать в HTML, XHTML, XML, SGML, XAML и т.д. Конечно, вам нужно что-то, что будет отображать каждый из этих типов документов, который также будет применять стиль. По определению CSS не поддерживает знать/понимать/заботиться о определенных тегах языка разметки. Таким образом, теги могут быть "недопустимыми" в отношении HTML, но в CSS нет понятия "допустимый" тег/элемент/тип.

Современные визуальные браузеры не являются монолитными. Они представляют собой смесь различных "двигателей", которые выполняют определенные работы. На минимальном минимуме я могу думать о трех двигателях, движке рендеринга, движке CSS и движке javascript/VM. Не уверен, что парсер является частью механизма рендеринга (или наоборот) или если он является отдельным движком, но вы получаете идею.

Независимо от того, использует ли браузер визуальный (другие, тот факт, что у читателей экрана могут быть другие проблемы с недействительными тегами), форматирование зависит от того, будет ли синтаксический анализатор оставляет в документе недействительный тег, а затем применяет ли движок рендеринга стили к этому тегу. Поскольку это затрудняет разработку/поддержку, механизмы CSS не записываются, чтобы понять, что "это HTML-документ, поэтому здесь приведен список допустимых тегов/элементов/типов". Механизмы CSS просто находят теги/элементы/типы, а затем сообщают движку рендеринга: "Вот стили, которые вы должны применить". Независимо от того, решит ли механизм рендеринга применить стили, до него.

Вот простой способ подумать о базовом потоке от движка к движку: парсер → CSS → рендеринг. В действительности это намного более запутанно, но это достаточно хорошо для начинающих.

Этот ответ уже слишком длинный, поэтому я закончу там.

Ответ 4

Неизвестные элементы рассматриваются как div современными браузерами. Вот почему они работают. Это часть будущего стандарта HTML5, который вводит модульную структуру, к которой могут добавляться новые элементы.

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

Вот вопрос который я нашел при поиске примера.

Вот вопрос о исправлении Javascript. Оказывается, это действительно IE7, который не поддерживает эти элементы из коробки.

Также; почему он не знал, что этикетные метки существуют и работают с CSS. Являются ли они необычными?

Да, вполне. Но особенно: они не служат дополнительной цели. И они новы для html5. В более ранних версиях HTML неизвестный тег был недопустимым.

Кроме того, учителя, похоже, иногда имеют пробелы в своих знаниях. Это может быть связано с тем, что они должны учить студентов основам данного предмета, и на самом деле он не окупается, чтобы знать все входы и выходы и быть в курсе последних событий. Я однажды получил заключение, потому что учитель думал, что я запрограммировал вирус, только потому, что я мог сделать музыку для компьютера, используя команду play в GWBasic. (Правда, да, давно). Но какова бы ни была причина, я думаю, что совет не использовать элементы custome является звуковым.

Ответ 5

На самом деле вы можете использовать пользовательские элементы. Вот спецификация W3C на эту тему:

http://w3c.github.io/webcomponents/spec/custom/

И вот учебник, объясняющий, как их использовать:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Как указано @Quentin: это спецификация проекта в первые дни разработки и что она налагает ограничения на то, что могут быть именами элементов.

Ответ 6

Есть несколько вещей о других ответах, которые либо плохо сформулированы, либо, может быть, немного неверны.

FALSE (ish): Нестандартные HTML-элементы "недопустимы", "незаконны" или "недействительны".

Не обязательно. Они "несоответствующие" . Какая разница? Что-то может "не соответствовать" и по-прежнему "разрешено". W3C не собирается отправлять полицию HTML в ваш дом и вытаскивать вас.

W3C оставил вещи таким образом по какой-то причине. Соответствие и технические характеристики определяются сообществом. Если у вас есть меньшее сообщество, потребляющее HTML для более конкретных целей, и все согласны с некоторыми новыми Элементами, которые им нужно облегчить, они могут иметь то, что W3C называет "другие применимые спецификации" . (это, очевидно, грубое упрощение, но вы понимаете)

Тем не менее, строгие валидаторы объявят ваши нестандартные элементы "недействительными". но это потому, что задание валидатора заключается в обеспечении соответствия любой спецификации, для которой оно выполняется, а не для обеспечения "законности" для браузера или для использования.

FALSE (ish): Нестандартные элементы HTML приведут к проблемам с отображением

Возможно, но маловероятно. (заменить "будет" на "возможно" ). Единственный способ, который может привести к проблеме рендеринга, заключается в том, что ваш пользовательский элемент конфликтует с другой спецификацией, такой как изменение спецификации HTML или другая спецификация, выполняемая в одной и той же системе (например, SVG, Math или что-то обычное).

На самом деле, причина, по которой CSS может создавать нестандартные теги, объясняется тем, что спецификация HTML гласит:

Пользовательские агенты должны обрабатывать элементы и атрибуты, которые они не понимают, как семантически нейтральные; оставляя их в DOM (для процессоров DOM) и стилизуя их в соответствии с CSS (для процессоров CSS), но не вызывая никакого значения из них

Примечание. Если вы хотите использовать пользовательский тег, просто запомните, что изменение спецификации HTML позднее может привести к вашему стилю, поэтому будьте готовы. Однако вряд ли W3C будет реализовывать тег <imsocool>.

Нестандартные теги и JavaScript (через DOM)

Причина, по которой вы можете получить доступ и изменить пользовательские элементы с помощью JavaScript, состоит в том, что спецификация var wee = document.createElement('wee'); console.log(wee.toString()); //[object HTMLUnknownElement]

(я уверен, что это нарисует пламя, но там мои 2 цента)

Ответ 7

Согласно спецификациям:

CSS

Селектор типов - это имя типа элемента языка документа, написанного с использованием синтаксиса имен, определенных CSS.

Я думал, что это называется селектором элементов, но, по-видимому, это действительно селектор типов. Спектр продолжает говорить о CSS qualified names, который не дает никаких ограничений на то, что имена на самом деле. То есть, пока селектор типов соответствует синтаксису синтаксиса CSS, он технически корректен CSS и будет соответствовать элементу в документе. Не существует ограничений, специфичных для CSS, для элементов, которые не существуют в конкретной спецификации - HTML или иначе.

HTML

Нет официальных ограничений на включение любых тегов в требуемый документ. Однако в документации говорится

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

И это позже говорит

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

Я не уверен, где конкретно, или если спецификация говорит, что нечеткие элементы разрешены, но он говорит о HTMLUnknownElement интерфейсе для непризнанных элементов. Некоторые браузеры могут даже не распознавать элементы, находящиеся в текущей спецификации (IE8 приходит на ум).

Существует черновик для пользовательских элементов, но я сомневаюсь, что он еще не реализован.

Ответ 8

Это возможно с помощью html5, но вам нужно учитывать старые браузеры.

Если вы решили использовать их, убедитесь, что COMMENT ваш html! У некоторых людей могут быть проблемы с выяснением того, что это такое, поэтому комментарий может сэкономить массу времени.

Что-то вроде этого,

<!-- Custom tags in use, refer to their CSS for aid -->

Когда вы создаете свой собственный тег/элементы, более старые браузеры не будут знать, что это такое, как элементы html5, такие как nav/section.

Если вас интересует эта концепция, я рекомендую сделать это правильно.

Начало работы

Пользовательские элементы позволяют веб-разработчикам определять новые типы HTML элементы. Спецификация является одним из нескольких новых примитивов API, зонтики Web Components, но это вполне возможно важный. Веб-компоненты не существуют без функций, разблокированных пользовательские элементы:

Определите новые элементы HTML/DOM. Создайте элементы, которые простираются от других Элементы Логически объединяют пользовательские функциональные возможности в единый tag Расширить API существующих элементов DOM

С этим можно многое поделать, и это делает ваш script красивым, как эта статья нравится. Пользовательские элементы, определяющие новые элементы в HTML.

Итак, давайте повторим,

Pros

• Очень элегантный и удобный для чтения.

• Приятно не видеть так много divs.: Р

• Позволяет уникально почувствовать код

против

• Старая поддержка браузера - это очень важная вещь.

• Другие разработчики не могут понять, что делать, если они не знают о пользовательских тегах. (Объясните им или добавьте комментарии, чтобы сообщить им)

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

Выбор полностью зависит от вас, и вы должны основывать его на запросах проекта.

Обновление 1/2/2014

Вот очень полезная статья, которую я нашел, и решил, что я поделился бы, Пользовательские элементы.

Изучите технологию Почему пользовательские элементы? Пользовательские элементы позволяют авторам определить свои собственные элементы. Авторы связывают код JavaScript с пользовательским тегом имена, а затем использовать те пользовательские имена тегов, как и любые стандартные тег.

Например, после регистрации специального типа кнопки, называемой супер-кнопку, используйте супер кнопку так:

Пользовательские элементы все еще являются элементами. Мы могут создавать, использовать, манипулировать и составлять их так же легко, как и любые стандартным или сегодня.

Это похоже на очень хорошую библиотеку, но я заметил, что она не прошла статус Window Build. Это также в пре-альфе, я верю, поэтому я буду следить за этим, пока он развивается.

Ответ 9

Почему он не хочет, чтобы вы их использовали? Они не являются обычным явлением и не являются частью стандарта HTML5. Технически, они не допускаются. Это взлом.

Мне нравятся они сами. Вы можете быть заинтересованы в XHTML5. Он позволяет вам определять свои собственные теги и использовать их как часть стандарта.

Кроме того, как указывали другие, они являются недействительными и, следовательно, не переносимы.

Почему он не знал, что они существуют? Я не знаю, разве что они не распространены. Возможно, он просто не знал, что мог.

Ответ 10

Я думаю, что создаваемые теги просто потенциально более сбивают с толку или неясны, чем p с идентификаторами (как правило, часть текста). Мы все знаем, что p с идентификатором - это абзац, но кто знает, для чего предназначены тэги? По крайней мере, это моя мысль.:) Поэтому это скорее проблема стиля/ясности, чем одна из функциональных возможностей.

Ответ 11

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

Браузер должен анализировать HTML-код в элементах, которые он знает, а созданные теги будут преобразованы во что-то еще, чтобы вписаться в объектную модель документа (DOM). Поскольку веб-стандарты не распространяются на то, как обрабатывать все, что выходит за рамки стандартов, веб-браузеры, как правило, обрабатывают нестандартный код по-разному.

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

Ответ 12

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

Ответ 13

CSS - это язык таблиц стилей, который может использоваться для представления документов XML, а не только (X) HTML-документов. Ваш фрагмент с прикрепленными тегами может быть частью юридического документа XML; это было бы одно, если бы вы вложили его в один корневой элемент. Вероятно, у вас уже есть <html> ...</html> вокруг него? Любой текущий браузер может отображать документы XML.

Конечно, это не очень хороший XML-документ, ему не хватает грамматики и объявления XML. Если вместо этого вы используете заголовок объявления HTML (и, вероятно, конфигурацию сервера, которая отправляет правильный тип mime), это будет скорее незаконным HTML.

(X) HTML имеет преимущества перед простым XML, поскольку элементы имеют смысловое значение, которое полезно в контексте презентации веб-страницы. Инструменты могут работать с этой семантикой, другие разработчики знают смысл, он менее подвержен ошибкам и лучше читать.

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

Вы должны добавить заголовок (X) HTML в свой документ, чтобы инструменты могли давать вам значимые сообщения об ошибках.

Ответ 14

... Я просто меняю все свои созданные теги на абзацы с идентификаторами.

Я действительно беру вопрос с его предложением о том, как правильно это сделать.

• Тег <p> для абзацев. Я вижу, что люди используют его все время вместо div - просто для интервальных целей или потому, что они кажутся более мягкими. Если это не абзац, не используйте его.

• Вам не нужно или хотите вставлять идентификатор во все, за исключением случаев, когда вам нужно специально настроить его (например, с помощью Javascript). Используйте классы или просто прямой div.

Ответ 15

С самого начала CSS был разработан как агрегированный для разметки, поэтому его можно использовать с любым языком разметки, создающим деревья как структуры DOM (например, SVG). Любой тег, который соответствует производству name token, отлично подходит для CSS. Поэтому ваш вопрос скорее о HTML, чем сам CSS.

Элементы с настраиваемыми тегами поддерживаются спецификацией HTML5. HTML5 стандартизирует способ анализа неизвестных элементов в DOM. Таким образом, HTML5 - это первая спецификация HTML, которая позволяет строго настраивать пользовательские элементы. Вам просто нужно использовать документ HTML5 <!DOCTYPE html> в вашем документе.

Как и для собственных имен тегов...

В этом документе http://www.w3.org/TR/custom-elements/ рекомендуются специальные теги, которые вы хотите содержать как минимум один символ "-" (тире). Таким образом, они не будут конфликтовать с будущими HTML-элементами. Поэтому вам лучше изменить свой документ на что-то вроде этого:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 

Ответ 16

^{По-видимому, никто не упоминал об этом, поэтому я буду.}

Это побочный продукт браузеров.

Еще в 1990-х годах, когда Интернет впервые начал распространяться, конкуренция была запущена на рынке браузеров. Чтобы оставаться конкурентоспособными и привлекать пользователей, некоторые браузеры (в первую очередь Internet Explorer) старались быть полезными и "удобными для пользователя", пытаясь понять, что означают дизайнеры страниц, и, следовательно, допустили неправильную разметку (например, <b><i>foobar</b></i> будет правильно отображать как полужирный курсив).

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

В то время как многие думали, что войны с браузером закончились, новая война между поставщиками браузеров заработала в последние несколько лет с момента выхода Chrome, Apple снова начала расти и нажала Safari, и IE потерял свое доминирование. (Вы можете назвать это "холодной войной" из-за предполагаемого сотрудничества и поддержки стандартов поставщиками браузеров.) Поэтому неудивительно, что даже современные браузеры, которые якобы строго соответствуют веб-стандартам, на самом деле пытаются быть "умными" и разрешить стандартное поведение, такое как это, чтобы попытаться получить преимущество по-прежнему.

К сожалению, это разрешительное поведение привело к массовому (некоторым, возможно, даже сказать о раковом) росту слабо обозначенных веб-страниц. Поскольку IE был самым мягким и популярным браузером, и из-за того, что Microsoft продолжала пренебрегать стандартами, IE стал печально известным для поощрения и поощрения плохого проектирования, распространения и увековечения разбитых страниц.

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

Ответ 17

В то время как браузеры обычно связывают CSS с тегами HTML независимо от того, действительны они или нет, вы НЕ ДОПУСКАЕТЕ это делать.

С точки зрения CSS нет ничего неправильного. Однако использование сделанных тегов - это то, что вы никогда не должны делать в HTML.

HTML - это язык разметки, что означает, что каждый тег соответствует определенному типу информации.

Ваши тэги, созданные вами, не соответствуют какой-либо информации. Это создаст проблемы с веб-сканерами, такими как Google.

Дополнительная информация о важности правильной разметки.

Изменить

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

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

Пользовательские теги не коррелируют с какими-либо стандартами, поэтому span/div следует использовать вместо свойств класса/идентификатора.

Есть очень конкретные исключения для этого, такие как Angular JS

Ответ 18

Хотя у CSS есть вещь, называемая "селектором тегов", она фактически не знает, что такое тег. Это позволило определить язык документа. CSS был разработан для использования не только с HTML, но и с XML, где (если вы не используете DTD или другую схему проверки), теги могут быть примерно чем угодно. Вы могли бы использовать его и на других языках, хотя вам нужно было бы придумать свою собственную семантику для того, что именно соответствуют тегам и "атрибутам".

Браузеры обычно применяют CSS к неизвестным тегам в HTML, потому что это считается лучше, чем полное разбиение: по крайней мере, они могут отображать что-то. Но очень плохая практика - использовать "поддельные" тэги намеренно. Одной из причин этого является то, что новые теги время от времени определяются, и если они определены, они выглядят как ваш поддельный тег, но не совсем одинаковы, что может вызвать проблемы с вашим сайтом в новых браузерах.