Подскажите по JavaScript’у из учебника, как он считает доступные CSS свойства в браузере?

12
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
277

Всем привет!

В книге Грега Сидельникова – Наглядный CSS дается прикольный пример JavaScript кода который вычисляет сколько всего свойств CSS поддерживает текущий браузер:

// Создание нового HTML-элемента

let element = document.createElement("div");

let p = 0; // Создание счетчика

for (index in element.style)

p++;

// Выводит 522 в Chrome по состоянию на 21 декабря 2018 года

console.log( p );

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

Если кто знает хорошо JavaScript то подскажите примерно, в двух словах, как скрипт работает и откуда он данные берет.

Заранее всем спасибо за ответы!


O
На сайте с 15.01.2022
Offline
21
#1

Привет! Данный скрипт на JavaScript создает новый HTML-элемент <div> , а затем использует цикл for..in для перебора всех свойств стиля этого элемента ( element.style ). Каждое свойство, найденное в переборе, увеличивает значение счетчика p на единицу.

Когда цикл завершается, выводится значение счетчика p , которое указывает на количество свойств CSS, поддерживаемых текущим браузером.

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

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

Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#2
okir #:

Привет! Данный скрипт на JavaScript создает новый HTML-элемент <div> , а затем использует цикл for..in для перебора всех свойств стиля этого элемента ( element.style ). Каждое свойство, найденное в переборе, увеличивает значение счетчика p на единицу.

Когда цикл завершается, выводится значение счетчика p , которое указывает на количество свойств CSS, поддерживаемых текущим браузером.

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

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

Спасибо, примерно понял.
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#3

Для статистики:

Opera - 604

Chrome - 604

Firefox - 1102

Edge - 604

Tor - 1071

Удивительно что количество поддерживаемых свойств CSS в трех браузерах совпало цифра в цифру.
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#4
За пять лет поддерживаемых свойств CSS браузерами по Chome’у прибавилось на 82 если верить цифрам автора из книги на момент 2018 года.
W1
На сайте с 22.01.2021
Offline
292
#5
Dmitriy_2014 #:
в трех браузерах  совпало

Они же все хромы.

Мой форум - https://webinfo.guru –Там я всегда на связи
Shelton724
На сайте с 26.05.2011
Online
246
#6
Dmitriy_2014 #:
За пять лет поддерживаемых свойств CSS браузерами по Chome’у прибавилось на 82

Зачем вообще эта не имеющая к реальной практике информация и нафига на неё тратить столько сил и времени, когда в среднем для каждого элемента используется 10-25 стилей? Да и вообще вряд ли кто-то видел элемент, где больше, скажем, 50 стилей на один элемент, только если это не было сделано специально для того, потому что "я могу, ничто меня не остановит". Про сотни речь вообще не идёт.

Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#7
webinfo #:

Они же все хромы.

Да, но я думал раньше что они чуть-чуть отличаются друг от друга, ну хотя бы на одно свойство.
Taras Petrenko
На сайте с 11.05.2023
Offline
6
#8
webinfo #:

Они же все хромы.

Тоr основан на Firefox, но цифры то разные...

Лучшие облачные решения для разработчиков - https://bit.ly/best-cloud-service
W1
На сайте с 22.01.2021
Offline
292
#9
Taras Petrenko #:
Тоr основан на Firefox

При чём тут  Тоr?

M2
На сайте с 27.12.2015
Offline
67
#10
Taras Petrenko #:

Тоr основан на Firefox, но цифры то разные...

что нибудь обрезали для "безопасности" или tor не использует актуальную версию firefox

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий