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

Question 1

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

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

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

(Существует спецификация для Пользовательские элементы, но они имеют особые требования к именованию и требуют регистрации с использованием JavaScript.)

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

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

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

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

Question 2

TL; DR

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

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

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

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

Точка действительного CSS/HTML | Переполнение стека

Google предпочитает это, так что это хорошо для SEO.

Это делает вашу веб -страницу с большей вероятностью работать в браузерах, которые вы не тестировали.

Это заставляет вас выглядеть более профессионально (по крайней мере, для некоторых разработчиков)

Соответствующие браузеры могут рендерировать [действительный HTML быстрее

Это указывает на кучу неясных ошибок, которые вы, вероятно, пропустили, которые влияют на вещи, которые вы, вероятно, не тестировали, например, набор CodePage или языка.

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

Валидация в качестве инструмента отладки

Проверка как проверка качества в будущем

Валидация облегчает техническое обслуживание

Валидация помогает научить хорошей практике

Валидация является признаком профессионализма

Question 3

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

РЕДАКТИРОВАТЬ: Пожалуйста, смотрите комментарий из BoltClock ниже, касающийся типа VS Tag VS Element. Я обычно не беспокоюсь о семантике, но его комментарий очень уместен и информативен.

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

Современный Визуальные браузеры не являются монолитными программами. Они представляют собой амальгаму разных «двигателей», которые имеют определенные задания. В голый минимум Я могу вспомнить 3 двигателя, двигатель рендеринга, двигатель CSS и двигатель JavaScript/VM. Не уверен, является ли анализатор частью двигателя рендеринга (или наоборот) или это отдельный двигатель, но вы поняли.

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

Вот простой способ подумать о базовый Поток от двигателя к двигателю: анализатор -> CSS -> рендеринг. В действительности это гораздо более запутанно, но это достаточно для начала.

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

Question 4

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

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

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

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

Также; Почему он не знал, что выдуманные теги существовали и работали с CSS. Они редко?

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

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

Question 5

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

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

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

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

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

Question 6

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

False (iSh): нестандартные HTML-элементы «не допускаются», «незаконны» или «недействительными».

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

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

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

False (iSh): нестандартные HTML-элементы будут привести к вопросам отмены

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

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

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

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

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

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

Интерфейс HTMlunkNownElement должен использоваться для элементов HTML, которые не определены этой спецификацией (или других применимыми спецификациями).

TL; DR: Соответствие спецификации выполняется для целей связи и безопасности. Несоценка все еще разрешена всем, кроме валидатор, единственная цель которого состоит в том, чтобы обеспечить соответствие, но чье использование необязательно.

Например:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

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

Question 7

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

CSS

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

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

HTML

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

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

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

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

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

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

Question 8

Это возможно с HTML5, но вам нужно принять во внимание старые браузеры.

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

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

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

Когда вы делаете свой собственный теги/элементы, старые браузеры не будут понятны, какими бы такими же элементами HTML5, как такие nav/section.

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

Начиная

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

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

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

Итак, давайте вернем,

Плюс

Очень элегантно и легко читать.
Приятно не видеть так много divs. Анкет :п
Позволяет уникально ощущать код

Минусы

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

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

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

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

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

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

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

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

Question 9

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

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

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

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

Question 10

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

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

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

Question 11

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

Question 12

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

Question 13

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

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

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

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

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

Question 14

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

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

А  тег для абзацев. Я вижу людей, использующих это все время, а не для Div - просто для промежуточных целей или потому, что это кажется более мягким. Если это не абзац, не используйте его.
Вам не нужно или вы хотите наклеить идентификаторы на все, если вам не нужно нацелиться на него конкретно (например, с JavaScript). Используйте классы или просто прямой див.

Question 15

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

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

Как имена пользовательских тегов сами ...

Этот документ http://www.w3.org/tr/custom-elements/ Рекомендует пользовательские теги, которые вы решите содержать как минимум один символ '-' (dash). Таким образом, они не будут конфликтовать с будущими элементами HTML. Поэтому вам лучше изменить свой документ на что -то вроде этого:

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

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

Question 16

Удивительно, но никто (включая мое прошлое) не упомянула доступность. Другая причина, по которой использование допустимых тегов вместо пользовательских, предназначена для совместимости с наибольшим количеством программного обеспечения, включая читателей экрана и других инструментов, которые необходимы людям для целей доступности. Более того, законы о доступности, такие как WAI требовать Создание доступных веб -сайтов, что обычно означает, что они требуют их использования действительной разметки.

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

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

Еще в 1990 -х годах, когда Интернет впервые начинал стать мейнстримом, конкуренция интарировала на рынке браузеров. Чтобы оставаться конкурентоспособными и нарисовать пользователей, некоторые браузеры (в частности, Internet Explorer) старались быть полезными и «удобными для пользователя», пытаясь выяснить, какие дизайнеры страниц дизайнеров страниц имел ввиду и, таким образом, разрешенная разметка, которая неверна (например, foobar правильно отображает как жирные италики).

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

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

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

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

Question 17

Хотя браузеры, как правило, будут связывать CSS с тегами HTML независимо от того, являются ли они действительными, вы должны абсолютно не делать этого.

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

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

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

Прочитайте больше информации о важность правильной разметки.

Редактировать

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

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

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

Есть очень конкретные исключения в этом, например Угловой JS

Question 18

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

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

Question 19

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

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

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