Как важный это должно следовать за веб-стандартами? [закрытый]
Если вы не возражаете против упорядочения элементов, вы можете создать массив всех элементов, используя простой селектор body * и цикл.
Во-первых, давайте абстрагируем экстрактор стилей, потому что мы будем использовать одно и то же несколько раз.
// get the styles for particular element
// apply all kind of JSON filtering here
function getElementStyles(elem) {
return JSON.parse(JSON.stringify(getComputedStyle(elem)))
}
// this will generate a single array containing all elements
function getStyleArray(selector) {
const styles = []
const allElements = document.querySelectorAll(selector)
for (const element of allElements) {
const style = getElementStyles(element)
styles.push(style)
}
return styles;
}
//usage
getStyleArray('body *')
Если вы хотите получить дерево, для этого уже есть несколько библиотек. Это, как говорится, вот как вы можете повторить один самостоятельно. Я использовал рекурсию, чтобы пройти через это.
// find if element is an element :D
function isElement(element) {
return element instanceof Element || element instanceof HTMLDocument;
}
// this will generate a tree style array
// all child elements are accesible using the child key
function getChildStyles(elem) {
const childStyles = []
for (let childNode of elem.childNodes) {
if (isElement(childNode)) {
const singleChildStyle = getElementStyles(childNode)
// recursion
if (childNode.hasChildNodes()) {
singleChildStyle.child = getChildStyles(childNode)
}
childStyles.push(singleChildStyle)
}
}
return childStyles
}
// usage
getChildStyles(document.body)
Обратите внимание,
- , что это можно улучшить, используя лучшие циклы и другие методы сортировки / поиска.
- это будет стоить вам много времени, если на странице много элементов.
Результат: 
Это работает !!!
Давайте применим на кукловода, вы можете просто скопировать вставить их или используйте addScriptTag .
await page.evaluate(() => {
// add the scripts we created somewhere and then use them here
return {
arrayBased: getStyleArray('body *'),
treeBased: getChildStyles(document.body)
}
})
10 ответов
Первая вещь, которую я делаю, состоит в том, чтобы протестировать в моих целевых средах. Если это работает и не удается проверить, это - вероятно, меньшая точка, но естественно стоящий исследования. Курс Вы действительно хотите бороться за доступность как можно больше.
Единственные причины дизайнеры сайта исторически не следовали за веб-стандартами, (1) не быть знающим о стандартах вообще, или (2) для создания нестандартно-совместимых браузеров (кашель *cough IE ) делают интересный материал. Но Internet Explorer недавно заставлял значительное двинуть совместимость стандартов, таким образом, причина (2) становится все меньше и меньше релевантной, и Вы, очевидно, не подвергаетесь, чтобы обосновать (1), итак, почему бы не записать стандартно-совместимые веб-сайты? Как другие сказали, это сделает Ваш код намного легче отладить, потому что только необходимо работать с одним стандартом, а не набором различных браузеров.
Если все работает во всех браузерах, Вы хотите поддерживать, не действительно настолько важно, чтобы HTML-код на самом деле проверил. Для XHTML это важно, хотя: XHTML использования подразумевает, что Вы хотите, чтобы Ваш код был читаем синтаксическими анализаторами XML, таким образом, что-либо, что не является допустимым XHTML, не должно быть объявлено как таковое.
, Но создание совместимого стандартами кода не твердо, т.е. никто, кто не потрудился фиксировать ошибочные шоу отсутствие профессионализма. Иногда можно было бы решить проигнорировать стандарты, но это должно всегда быть сознательным решением - например, домашняя страница Google оптимизирована для скорости и перекрестной поддержки браузера и была протестирована экстенсивно. Если у Вас нет ресурсов для такого тестирования и непрерывной поддержки, необходимо придерживаться стандартов.
Как примечание стороны - это не большое усилие следовать за веб-стандартами. Когда Вы привыкаете к нему, Вы быстро замечаете, сколько из усилия это не должно делать так. Используя веб-стандарты обычно производит МЕНЬШЕ кода (= меньше времени для записи), БОЛЬШЕ ЧИТАЕМОГО кода и "соответствующего требованиям завтрашнего дня" кода по сравнению с любой oldschool техникой расположения, которую Вы хотите использовать вместо этого.
Короче говоря - очень. В целях межплатформенного & перекрестная совместимость браузера, это важно.
необходимо ли следовать за ними к T? Если Вы не сделаете, то Вы, вероятно, будете хорошо.
Большим количеством вещей, которые не следуют строгим стандартам, являются унаследованные приложения, которые изменялись со временем.
, По-моему - нет никакой причины не следовать строгим стандартам на новом проекте.
Ian
Вещь об этих больших сайтах состоит в том, что у них есть армия программистов, чтобы гарантировать, что сайт продолжает работать .
Делают Вас? Вы готовы потратить свои деньги на это?
проблема с не следованием стандартам состоит в том, что у Вас нет гарантий того, как Ваш сайт собирается работать в tomorrows браузерах.
Затем существуют другие проблемы, как доступность или то, чтобы позволять автоматизированные инструменты проанализировать Ваш сайт. Является ли это поисковыми роботами поисковой системы или сайтами, агрегировавшими информацию, доступную от микроформатов или программ для чтения с экрана для слепых людей или какого-либо из десятков других инструментов, которые должны смочь считать Ваш сайт, у Вас нет гарантий, они смогут проанализировать Ваш сайт, если это - случайный суп тега.
Затем существуют инструменты что Вы сами нас. Будет jQuery или другие библиотеки JavaScript мочь выяснить Ваш странный нестандартный DOM? Возможно, возможно, нет. Будет версия следующей недели? Кто знает?
И наконец, какова стоимость? Дело не в этом трудно для записи совместимого HTML/CSS. Требуется некоторая практика для выяснения некоторых приемов CSS, чтобы не полагаться на или нестандартный HTML устаревший, но после того как Вы поняли это, столь же легко записать как Ваш типичный неаккуратный нестандартный код. И конечно это может даже сделать вещи легче, потому что это позволяет Вам значительно использовать инструменты как блок проверки допустимости HTML при отладке. Трудно использовать это для чего-либо полезного, если Ваш сайт содержит 50 ошибок HTML в любом случае. Какой из них, если таковые имеются, связан с проблемой, которую Вы пытаетесь решить?
Браузеры и другие веб-читатели полагаются на разработчиков для следования стандартам, и по большей части не трудно придерживаться их. Поэтому просто сделайте лучшее, Вы можете, но не делать себя непроизводительными для следования за ними.
Если Вы будете следовать стандартам, то любые ошибки расположения будет намного легче отладить. При игнорировании стандартов браузер может представить страницу однако, похоже, и изменение одного символа может полностью измениться, как страница представляется. Отладка одного браузера трудна, но отладка IE 7, IE 6, Firefox, Opera, Safari... и игнорирование стандартов просто собирается сделать Вашу жизнь трудной.
при использовании jQuery или других библиотек управления DOM можно получить неожиданные и непоследовательные результаты, если разметка не допустима.
Так, не тратьте впустую свое время. Удостоверьтесь, что Вы пишете допустимый HTML и CSS. Это действительно действительно легко, и сэкономит Вам время.
Очень важный. Доступность, удобство использования, мобильность, это - закон (в некоторых случаях), масштабируемость, легче интегрироваться с различными средами разработки приложения и CMSes. Список продолжается, но другие плакаты ответили на вопросы достаточно хорошо.
Ваш средний бизнес-владелец обычно говорит, "кто заботится" во многом как OP. Мой самый эффективный ответ к настоящему времени был "ботом Google, не что иное как пользователь торца цилиндра со стороны головки. Разве Вы не хотите, чтобы это перечислило Ваш сайт эффективно?"
Это зависит от размера Вашей аудитории. Если это для Вашего блога, можно быть довольно неаккуратными. Я сделал правительственные веб-сайты, однако, где было критически важно, чтобы мы следовали за веб-стандартами и следовали инструкциям по доступности.
, Но да, просто сделайте это. Почему не был бы Вы?