#javascript #html #css #createelement
#javascript #HTML #css #createelement
Вопрос:
Из любопытства, какое влияние это окажет на сайт или страницу, если вместо использования идентификаторов или классов для элементов вы просто создаете пользовательские элементы с помощью JS и стилизуете их с помощью CSS?
Например, если я создаю элемент «контейнер» и использую его как <container > вместо <div class="container"> , есть ли разница в производительности или что-то в этом роде?
Я не вижу, чтобы это часто использовалось, и мне интересно, почему?
Ответ №1:
Это все равно, что сказать: «Что, если я уважаю синтаксис и грамматику английского языка, но составляю все слова?» Хотя такое мышление создает хорошую поэзию, оно плохо подходит для технических областей 😉
HTML имеет определенный набор допустимых тегов. Если вы используете какие-либо составленные теги, они будут недействительными.
Это не значит, что вам это не сойдет с рук; во всемирной паутине по умолчанию используется прощение, поэтому, если вы использовали теги, которые сами придумали, это не было бы концом света… но это все равно было бы плохой идеей, потому что у вас не было бы гарантии, как браузеры обрабатывают эти теги.
Таким образом, единственный реальный ответ на вопрос «какое влияние это окажет на страницу, если вместо использования идентификаторов или классов для элементов вы просто создадите пользовательские элементы с помощью JS и стилизуете их с помощью CSS?» может произойти что угодно. Поскольку вы будете использовать нестандартные HTML-элементы, вы получите нестандартные результаты, которые никто из нас не должен пытаться предсказать.
Если вы действительно хотите (и / или должны) использовать пользовательские элементы, загляните в XML. В XML вы можете «создавать» свои теги, но при этом можете применять CSS и открывать документы в браузере.
Например, сохраните следующие два файла, а затем откройте XML-файл в браузере:
index.xml
<?xml-stylesheet href="style.xml.css"?>
<example>
<summary>
This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
</summary>
<main>
<container>This is the stuff in the container</container>
</main>
</example>
style.xml.css
summary {
display:none;
}
main container {
border:2px solid blue;
background:yellow;
color:blue;
}
Комментарии:
1. Спасибо, что не предположили, что я идиот, и просто четко ответили на теоретический вопрос! Спасибо!
Ответ №2:
HTML стандартизирован, вы не можете просто изобретать новые элементы. Некоторые браузеры будут отображать текстовое содержимое элемента, который они не распознают, но не все, и в таком случае ваш HTML-код не будет действительным HTML.
Комментарии:
1. Конечно, ты можешь изобретать новые элементы, Дилетант. Это называется createElement 😛
2. Ну, у меня никогда не было проблем с (например) «неизвестными» элементами HTML5, отображаемыми в IE6 (
<section>или<article>), но ваша точка зрения по-прежнему верна. Главный риск заключается в том, что когда-нибудь кто-нибудь может решить, что<container>это означает «мигающее изображение фиолетового кролика» или что-то в этом роде.3. Я хочу сказать, что вы не можете изобретать новые элементы и при этом иметь действительный HTML-код.
4. @Pointy: Не только это. Браузер мог бы полностью игнорировать этот элемент, если бы захотел.
5. Да, верно; это было бы еще одним возможным изменением в поведении, и, вероятно, более вероятным 🙂
Ответ №3:
HTML — это определенный язык, элементы и теги имеют определенное значение в рамках формата. Вы не можете изобрести новый элемент не только потому, что браузеры могут отображать эти элементы непоследовательно, но и потому, что смысл и структура документа становятся недействительными.
Лучше всего использовать элемент, который имеет правильное значение для содержимого, которое вы хотите предоставить. Если вам требуется универсальный контейнер для стилизации, правильным элементом является div. Существуют похожие элементы, которые также обеспечивают некоторое семантическое значение. Я бы рекомендовал проверить индекс тегов HTML и HTML5 doctor для получения помощи в выборе правильного элемента.
Это звучит так, как будто <div class="container">...</div> это самое близкое к тому, что вам нужно из вашего краткого описания.
Комментарии:
1. Stuie, вопрос чисто теоретический. Существуют ли какие-либо проблемы с производительностью, помимо стандартов? Разве это плохо для SEO? И т.д. Я понимаю, что это не стандартный HTML, я не просто учусь писать HTML.
2. Если бы вы захотели, конечно, вы могли бы написать кучу тегов <oldbull></oldbull> … С точки зрения производительности вы вряд ли столкнетесь с серьезными проблемами, поскольку большинство браузеров будут отображать неизвестные элементы как встроенные элементы, я полагаю. IE в большинстве случаев игнорирует их рендеринг. С точки зрения SEO, вы делаете это на свой страх и риск, я бы предположил, что большинство поисковых систем имеют достаточный опыт индексации <тарабарщины> сайтов </ тарабарщина> на протяжении многих лет… Приняли ли они стратегию наказания за мусорную разметку, я не знаю. Причина, по которой я отвечаю так, как указано выше, заключается в том, что существует множество адекватных элементов для того, что вам нужно сделать.
3. Кроме того, если вам нужен IE для применения стилей к вашим изобретенным элементам, вам необходимо включить скрипт document.createElement(«myinventedelement»); в вашу разметку… По какой-то странной причине IE затем решает, что он должен применять правила стиля к этим элементам… Просто… Не делайте этого…
Ответ №4:
Если пользовательские элементы облегчают чтение и управление вашим HTML, продолжайте и используйте их.
Поскольку этот вопрос был задан, пользовательские элементы с тех пор были добавлены в HTML Living Standard WHATWG вместе со связанным JavaScript API. Некоторые фреймворки веб-компонентов уже реализуют некоторые из этих спецификаций. Это больше не табу, как это было в 2011 году. (Я помню, что у меня были некоторые неприятные проблемы, связанные с DOM в Internet Explorer при попытке использовать недавно анонсированные элементы HTML5.)
На момент написания этой статьи (ноябрь 2018 года) пользовательские элементы были реализованы в нескольких основных браузерах. Однако в MDN указано, что Microsoft Edge еще не внедрила пользовательские элементы, хотя в сообщении в блоге от 2015 года говорится, что команда Edge «рада продолжать поддерживать и вносить свой вклад в это путешествие».