Чому CSS працює з підробленими елементами?

У своєму класі я розігрувався і дізнався, що CSS працює зі складеними елементами.

Приклад:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

Коли мій професор вперше побачив, як я це використовую, він трохи здивувався, що складені елементи спрацювали, і рекомендував мені просто змінити всі складені елементи на абзаци з ідентифікаційними.

Чому мій професор не хоче, щоб я використовував стилізовані елементи? Вони працюють ефективно.

Крім того, чому він не знав, що створені елементи існують і працюють з CSS. Вони нечасті?

Чому CSS працює з підробленими елементами?

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

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

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

Чому мій професор не хоче, щоб я використовував стилізовані елементи?

• Спеціалізація HTML заборонена
• Вони можуть конфліктувати з майбутніми стандартними елементами з такою ж назвою
• Напевно, існує існуючий HTML-елемент, який краще підходить до завдання

Також; чому він не знав, що складені елементи існують і працювали з CSS. Вони нечасті?

Так. Люди не користуються ними, оскільки вони мають вищезазначені проблеми.

TL; DR

• Спеціальні теги недійсні в HTML. Це може призвести до проблем із наданням.
• Складає подальшу розробку, оскільки код не є портативним.
• Дійсний HTML пропонує багато переваг, таких як SEO, швидкість та професіоналізм.

Довга відповідь

Існує кілька аргументів, що код із спеціальними тегами є більш корисним.

Однак це призводить до недійсного HTML. Що не добре для вашого сайту.

Точка дійсної CSS / HTML | Переповнення стека

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

Чому перевірити | W3C

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

YADA (ще одна (інша) відповідь)

Редагувати: Будь ласка, дивіться коментар від BoltClock нижче щодо типу vs тег проти елемента. Зазвичай я не переживаю семантику, але його коментар дуже доречний та інформативний.

Хоча вже є маса хороших відповідей, ви вказали, що ваш професор запропонував вам написати це запитання, щоб, здається, ви знаходитесь (формально) у школі . Я думав, що я детальніше роздам детальніше про не лише CSS, а й механіку веб-браузерів. Згідно Вікіпедії , «CSS це мова стилів лист , який використовується для опису ... документ , написаний в вигляді мови розмітки.» (Я додав акцент на "a") Зауважте, що він не говорить "написано в HTML" набагато менше конкретної версії HTML. CSS можна використовувати в HTML, XHTML, XML, SGML, XAML тощо. Звичайно, вам потрібно щось, що візуалізуватимекожен із цих типів документів, які також застосовуватимуть стилізацію. За визначенням, CSS не знає / не розуміє / не піклується про конкретні теги мови розмітки. Так, теги можуть бути "недійсними", що стосується HTML, але в CSS немає поняття "дійсний" тег / елемент / тип.

Сучасні візуальні браузери - це не монолітні програми. Вони є об'єднанням різних "двигунів", які мають виконувати конкретні роботи. Як мінімум, я можу подумати про 3 двигуни, двигун візуалізації, двигун CSS та двигун javascript / VM. Не впевнений, чи аналізатор є частиною двигуна візуалізації (або навпаки) чи це окремий двигун, але ви розумієте.

Чи застосовується візуальний браузер чи ні ( інші вже зверталися до того, що у читачів екрану можуть виникнути інші проблеми, пов’язані з недійсними тегами ) застосовується форматування, залежить від того, залишає аналізатор тегу "недійсний" у документі, а потім застосовує механізм візуалізації стилі до цього тегу. Оскільки це ускладнить розробку / підтримку, двигуни CSS не пишуть, щоб зрозуміти, що "Це документ HTML, тому ось список дійсних тегів / елементів / типів". Двигуни CSS просто знаходять теги / елементи / типи, а потім повідомляють механізму візуалізації: "Ось стилі, які ви повинні застосувати". Незалежно від того, чи вирішить механізм візуалізації реально застосовувати стилі, це залежить від нього.

Ось простий спосіб подумати про базовий потік від двигуна до двигуна: парсер -> CSS -> візуалізація. Насправді це набагато перекрученіше, але це досить добре для початківців.

Ця відповідь вже занадто довга, тому я закінчусь на цьому.

divСучасні браузери невідомі елементи трактують як s. Тому вони працюють. Це частина нового стандарту HTML5, який вводить модульну структуру, до якої можна додавати нові елементи.

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

Ось відповідне питання, яке я знайшов, шукаючи приклад.

Ось питання про виправлення Javascript . Виявляється, справді IE7 не підтримує ці елементи поза коробкою.

Також; чому він не знав, що складені теги існують і працювали з CSS. Вони нечасті?

Так, цілком. Але особливо: вони не служать додатковій меті. І вони новинки в html5. У попередніх версіях HTML невідомий тег був недійсним.

Крім того, вчителі, здається, іноді мають прогалини у своїх знаннях. Це може бути пов’язано з тим, що вони повинні навчити студентів основам певного предмету, і це не дуже добре, щоб знати всі входи та виходи і бути дійсно актуальними. Я одного разу потрапив під варту, тому що вчитель думав, що я запрограмував вірус, просто тому, що я міг зробити комп'ютер, який відтворював музику, використовуючи playкоманду в GWBasic. (Справжня історія, і так, давно). Але яка б не була причина, я вважаю, що порада не використовувати елементи зберігання є надійною.

Насправді ви можете використовувати спеціальні елементи. Ось специфікація W3C з цього приводу:

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

Ось підручник, що пояснює, як ними користуватися:

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

Як вказував @Quentin: це специфікація проекту в перші дні розробки, і це накладає обмеження на те, якими можуть бути імена елементів.

Є кілька речей щодо інших відповідей, які або є лише погано сформульованими або, можливо, трохи невірними.

FALSE (ish): нестандартні елементи HTML "не дозволено", "незаконно" або "недійсно".

Не обов'язково. Вони "невідповідні" . Яка різниця? Щось може "не відповідати" і все-таки бути "дозволеним". W3C не збирається відправляти HTML-поліцію до вашого будинку і вивозити вас.

W3C залишив речі таким чином не просто так. Відповідність та технічні характеристики визначаються громадою. Якщо у вас є менша спільнота, яка споживає HTML для більш конкретних цілей, і всі вони домовляються про деякі нові елементи, які їм потрібні, щоб полегшити роботу, вони можуть мати те, що W3C називає "іншими застосовними специфікаціями" . (очевидно, що це суттєве перевищення спрощення, але ви розумієте)

Однак, суворі валідатори визнають ваші нестандартні елементи "недійсними". але це тому, що завдання валідатора - забезпечити відповідність будь-яким специфікаціям, для яких це підтверджує, а не забезпечити "законність" для браузера або для використання .

FALSE (МІГ): Нестандартні HTML елементи будуть приводити до візуалізації питань

Можливо, але малоймовірно. (замініть "буде" на "може"). Єдиний спосіб цього може спричинити проблему візуалізації, якщо ваш користувальницький елемент суперечить іншій специфікації, такі як зміна специфікації HTML або інша специфікація, яка вшановується в тій же системі (наприклад, SVG, Math чи щось на замовлення).

Насправді причина CSS може створювати нестандартні теги в тому, що специфікація HTML чітко говорить про те, що:

Користувацькі агенти повинні ставитися до елементів та атрибутів, які вони не розуміють як семантично нейтральні; залишаючи їх у DOM (для DOM-процесорів) та стилізуючи їх відповідно до CSS (для CSS-процесорів), але не випливає із них ніякого значення

Примітка. Якщо ви хочете скористатися спеціальним тегом, пам’ятайте, що зміна специфікації HTML пізніше могла підірвати ваш стиль, тому будьте готові. <imsocool>Однак це малоймовірно, що W3C реалізує тег.

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

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

Інтерфейс HTMLUnknownElement повинен використовуватися для елементів HTML, які не визначені цією специфікацією (або іншими застосовними специфікаціями).

TL; DR: Відповідність специфікації проводиться з метою зв'язку та безпеки. Невідповідність все ще дозволена всім, крім валідатором , єдиною метою якого є забезпечення відповідності, але використання якого не є обов'язковим.

Наприклад:

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

(Я впевнений, що це приверне полум’я, але є мої 2 копійки)

Відповідно до специфікацій:

CSS

Селектор типу це ім'я типу елемента мови документа , написаного з використанням синтаксису CSS уточнених імен

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

HTML

Немає офіційного обмеження щодо включення будь-яких тегів до потрібного документа. Однак документація говорить

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

А згодом сказано

Автори не повинні використовувати елементи, атрибути чи значення атрибутів, які не дозволені цією специфікацією чи іншими застосовними специфікаціями, оскільки це значно ускладнює розширення мови в майбутньому.

Я точно не знаю, де або якщо специфікація каже, що недозволені елементи дозволені , але він говорить про інтерфейс HTMLUnknownElement для нерозпізнаних елементів. Деякі браузери можуть навіть не розпізнавати елементи, які є у поточній специфікації (IE8 приходить на думку).

Хоча є проект для користувацьких елементів , але я сумніваюся, що він ще реалізований де-небудь.

Це можливо за допомогою html5, але вам потрібно врахувати старі браузери.

Якщо ви все-таки вирішите їх використовувати, не забудьте коментувати ваш HTML !! У деяких людей можуть виникнути проблеми з розумінням того, що це таке, так що коментар може заощадити їм багато часу.

Щось на зразок цього,

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

Коли ви робите власний власний тег / елементи, старші веб-переглядачі не матимуть поняття, що це так, як елементи html5, як nav/ section.

Якщо вас зацікавила ця концепція, то я рекомендую зробити це правильно.

Починаємо

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

Визначте нові елементи HTML / DOM Створіть елементи, що поширюються на інші елементи Логічно об'єднайте власні функціональні можливості в один тег Розширення API існуючих елементів DOM

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

Отже давайте резюмувати,

Плюси

• Дуже елегантний і легкий для читання.

• Приємно не бачити стільки divs. : с

• Дозволяє унікальному відчуттю коду

Мінуси

• Підтримка старих браузерів - це важлива річ.

• Інші розробники можуть не мати поняття, що робити, якщо вони не знають про власні теги. (Поясніть їм або додайте коментарі, щоб повідомити їх)

• Нарешті, одна річ, яку слід враховувати, але я не впевнений, це елементи блоку та вбудовані елементи. Використовуючи власні теги, ви закінчите писати більше CSS, оскільки користувацький тег не матиме його за замовчуванням.

Вибір повністю залежить від вас, і ви повинні базуватись на тому, що просить проект.

Оновлення 1/2/2014

Ось дуже корисна стаття, яку я знайшов і подумав, що поділюсь, користувацькі елементи .

Дізнайтеся про техніку Чому користувацькі елементи? Спеціальні елементи дозволяють авторам визначати власні елементи. Автори пов'язують код JavaScript з назви власних тегів, а потім використовують ці власні імена тегів, як і будь-який стандартний тег.

Наприклад, після реєстрації спеціальної кнопки під назвою супер-кнопка використовуйте супер-кнопку саме так:

Спеціальні елементи все ще є елементами. Ми можемо їх створювати, використовувати, маніпулювати та складати так само легко, як будь-який стандарт чи сьогодні.

Це здається дуже гарною бібліотекою для використання, але я помітив, що він не перейшов у статус збірки Window. Це також є в попередній альфа, я вважаю, тому я б стежив за цим, поки це розвивається.

Чому він не хоче, щоб ти ними користувався? Вони не є загальними і не є частиною стандарту HTML5. Технічно їх заборонено. Вони - хак.

Мені вони самі подобаються. Вас може зацікавити XHTML5. Це дозволяє визначити власні теги та використовувати їх як частину стандарту.

Крім того, як зазначали інші, вони недійсні і тому не є портативними.

Чому він не знав, що вони існують? Я не знаю, за винятком того, що вони не поширені. Можливо, він просто не усвідомлював, що ти можеш.

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

Веб-браузер повинен розібрати HTML-код на відомі йому елементи, а складені теги будуть перетворені на щось інше, щоб вписатись у модель об'єкта документа (DOM). Оскільки веб-стандарти не стосуються того, як поводитися з усім, що знаходиться поза стандартами, веб-браузери, як правило, обробляють нестандартний код різними способами.

Веб-розробка досить складна з купою різних браузерів, які мають свої примхи, не додаючи іншого елемента невизначеності. Найкраще, щоб це було дотримуватися речей, які насправді є стандартами, саме цього намагаються дотримуватися постачальники браузерів, так що це найкращий шанс реально працювати.

Я думаю, що складені теги є просто потенційно більш заплутаними чи незрозумілими, ніж p з ідентифікаторами (якийсь блок тексту взагалі). Всі ми знаємо, що ap з ідентифікатором є абзацом, але хто знає, для чого призначені складені теги? Принаймні, це моя думка. :) Тому це швидше питання стилю / чіткості, ніж функціональність.

Інші наголосили на відмінних моментах, але варто зазначити, що якщо ви подивитеся на такі рамки, як AngularJS , то для користувацьких елементів та атрибутів існує дуже вагомий випадок. Вони передають не лише кращий семантичний зміст xml, але й можуть надавати поведінку, зовнішній вигляд веб-сторінці.

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

Звичайно, це не дуже хороший XML-документ, йому не вистачає граматики та декларації XML. Якщо ви замість цього використовуєте заголовок декларації HTML (і, ймовірно, конфігурацію сервера, що надсилає правильний тип mime), натомість це буде незаконний HTML.

(X) HTML має переваги перед звичайним XML, оскільки елементи мають смислове значення, що корисно в контексті презентації веб-сторінки. Інструменти можуть працювати з цією семантикою, інші розробники знають значення, вона менш схильна до помилок і краще читати.

Але в інших контекстах краще використовувати CSS з XML та / або XSLT для презентації. Це те, що ти зробив. Оскільки це не було вашим завданням, ви не знали, чим займаєтесь, а HTML / CSS - це кращий спосіб пройти більшу частину часу, коли ви повинні дотримуватися цього у своєму сценарії.

Ви повинні додати до свого документа заголовка (X) HTML, щоб інструменти могли надсилати вагомі повідомлення про помилки.

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

Я насправді сприймаю його пропозицію, як це зробити правильно.

1. <p>Тег для пунктів. Я бачу людей, які використовують це весь час замість діва - просто з метою відстань або тому, що це здається ніжнішим. Якщо це не абзац, не використовуйте його.

2. Вам не потрібно і не потрібно приклеювати ідентифікатори на все, якщо вам не потрібно націлити його конкретно (наприклад, за допомогою Javascript). Використовуйте класи або просто прямий дів.

З ранніх часів 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> 

^{Мабуть, ніхто про це не згадував, так і буду.}

Це побічний продукт війн браузерів .

Ще в 90-х роках, коли Інтернет вперше почав переходити на мейнстрім, конкуренція посилюється на ринку браузерів. Щоб залишатися конкурентоспроможними та притягувати користувачів, деякі веб-переглядачі (особливо Internet Explorer) намагалися бути корисними та «зручними для користувачів», намагаючись розібратися, що означають дизайнери сторінок, і, таким чином, допустили розмітку, неправильну (наприклад,<b><i>foobar</b></i> правильно відображатимуться як жирний- курсивом).

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

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

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

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

Хоча браузери, як правило, відносять CSS до тегів HTML, незалежно від того, чи дійсні вони чи ні, вам слід АБСОЛЮТНО НЕ робити цього.

З точки зору CSS в цьому немає нічого поганого. Однак використовувати складені теги - це те, що НІКОЛИ не слід робити в HTML.

HTML - мова розмітки, що означає, що кожен тег відповідає певному типу інформації.

Складені теги не відповідають жодному типу інформації. Це створить проблеми з веб-сканерами, такими як Google.

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

Редагувати

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

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

Спеціальні теги не співвідносяться ні з якими стандартами, і тому замість них слід використовувати "span / div" із властивостями класу / ID.

Існують дуже специфічні винятки до цього, такі як Angular JS

Хоча в CSS є річ, яка називається "селектор тегів", вона насправді не знає, що таке тег. Залишилось визначити мову документа. CSS був розроблений для використання не тільки з HTML, але і з XML, де (якщо ви не використовуєте DTD або іншу схему перевірки), теги можуть бути майже будь-якими. Ви можете використовувати його і з іншими мовами, хоча вам потрібно буде придумати власну семантику для того, що саме відповідає тегам, як "теги" та "атрибути".

Браузери зазвичай застосовують CSS до невідомих тегів у HTML, оскільки це вважається кращим, ніж повністю порушити: принаймні, вони можуть щось відображати. Але дуже погано застосовувати свідомо використовувати "підроблені" теги. Однією з причин цього є те, що час від часу визначаються нові теги, і якщо визначений такий, який схожий на ваш підроблений тег, але не зовсім працює однаково, це може спричинити проблеми з вашим сайтом у нових браузерах.

Чому CSS працює з підробленими елементами? Тому що це нікому не шкодить, оскільки ти не повинен їх використовувати в будь-якому випадку.

Чому мій професор не хоче, щоб я використовував стилізовані елементи? Тому що якщо цей елемент буде визначений специфікацією, у майбутньому ваш елемент матиме непередбачувану поведінку.

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