Перейти до вмісту

Використання

Як ви використовуєте HTML.

Сумісність між браузерами

There's always a bit of lag between the state of the web platform and actual real-world adoption, so it shouldn't come as a surprise that the Popover API still tops the rankings. But make no mistake, this feature now officially has the "Newly Available" Baseline status, meaning using it across browser should be much less of an issue going forward.

Якими наявними функціями HTML або API браузера ви не можете користуватися через відмінності між браузерами або недостатнє підтримування?
Множинний вибір
Головні проблеми для конкретної функції вебплатформи.

Вигляд:

Елементи, позначені як “features
0%
20%
40%
60%
80%
100%
01
02
<select>
+4
03
-1
04
05
+7
06
-1
07
-3
08
+2
09
<input type="date">
-1
10
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Обмежена функціональність

Form controls and other interactive elements are once again those perceived as most limiting. With customizable select out of the way, it looks like perhaps date pickers should be the next target.

Якими наявними функціями HTML або API браузера ви не можете користуватися з інших причин (і чому)?
Множинний вибір
Головні проблеми для конкретної функції вебплатформи.

Вигляд:

Елементи, позначені як “features
0%
20%
40%
60%
80%
100%
01
<select>
02
<input type="date">
03
+5
04
05
-1
06
+1
07
<select multiple>
08
-2
09
10
<input type="color">
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Відсутні елементи

This year again datatable is the most requested new element. While it would certainly be nice to have built-in filtering, sorting, searching, etc. capabilities, it doesn't seem like something that will become a reality anytime soon.

On the other hand, progress is being made on other long-awaited features such as a native switch element, which explains its drop in the rankings.

Якби ви могли додати нові елементи до HTML, що б це було?
Множинний вибір
0%
20%
40%
60%
80%
100%
01
Таблиця для даних
1,545
02
Комбінований список / Елемент автодоповнення
1,249
03
Вкладки
-1
1,182
04
Випадне меню
1,071
05
Редактор збагаченого тексту
975
06
Перемикач (Switch / Toggle)
-3
957
07
Вміщення HTML (HTML include)
920
08
Список із сортуванням за допомогою перетягування
910
09
Каркасний UI / Заповнювач під час завантаження
-5
728
10
Контекстне меню / Меню, що викликається правою кнопкою
-5
719
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Проблеми додавання стилів

It will be no surprise that form inputs top the list of hardest elements to style. Thankfully, customizable select elements are in the works, even though browser support is still lagging.

До яких елементів вам найскладніше додавати стилі або візуально їх налаштовувати?
Множинний вибір
0%
20%
40%
60%
80%
100%
01
<select>
1,699
02
<input type="date">
1,178
03
<select multiple>
792
04
791
05
Проблеми валідації
491
06
432
07
<input type="time">
401
08
369
09
<input type="range">
317
10
314
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Повторне використання HTML

It's hard to dispute that JavaScript components have become the dominant paradigm of building UIs on the web. And yes, dealing with all these competing front-end frameworks can be messy–but it's a mess we know (and maybe even love?), a fact that makes it tough for web components to gain ground beyond fourth place.

Які стратегії ви використовуєте для створення компонентів або повторного використання HTML-коду?
Множинний вибір
0%
20%
40%
60%
80%
100%
1
JavaScript-фреймворки на основі компонентів
2,696
2
Шаблонування на сервері
1,922
3
Шаблонування на клієнті
1,297
4
1,237
5
Шаблонування під час збирання
1,184
6
Копіювати-вставити
914
7
Допоміжні бібліотеки вебкомпонентів
492
8
🚫 Нічого
44
9
Інші відповіді
69
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Дизайн-системи

Design systems have become a requirement for most large-scale projects, and that fact is reflected in the popularity of all these various approaches.

Чи використовуєте ви якусь із наведених нижче стратегій для дизайн-систем, щоб мати консистентний та узгоджений UI?
Множинний вибір
0%
20%
40%
60%
80%
100%
1
Елементи/компоненти
3,084
2
Дизайн-токени
2,664
3
Допоміжні класи
2,407
4
Керівні принципи
2,008
5
Шаблони
1,316
6
🚫 Нічого
112
7
Інші відповіді
45
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Співвідношення HTML/CSS і JS/TS

As shown in the “Component Strategies” chart above, JavaScript is the de facto vessel for a lot of the HTML code we produce. Which explains why we spend so much time writing it!

Як поділяється ваш час між написанням коду HTML/CSS і JavaScript (або TypeScript)?
0%
20%
40%
60%
80%
100%
1
100% HTML/CSS
65
2
1
269
3
2
422
4
3
287
5
50%–50%
635
6
5
494
7
6
1,179
8
7
494
9
100% JS
40
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Використання HTML

While the average survey respondents mainly works on dynamic web apps, many of us also spend time creating blogs or other text-heavy sites, harkening back to HTML's roots as a document-oriented language.

Для чого ви зазвичай використовуєте HTML?
Множинний вибір
0%
20%
40%
60%
80%
100%
01
Вебзастосунки
3,378
02
Блоги чи інші сайти з великою кількістю тексту
2,253
03
Сайти для продажу та сторінки-вітрини
1,894
04
Дизайн-системи
1,519
05
Електронні листи
1,139
06
Застосунки для настільних комп'ютерів
891
07
Застосунки для мобільних пристроїв
879
08
Документи для друку
659
09
E-Commerce sites
10
🚫 Нічого
16
11
Інші відповіді
114
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
💡
Науково доведено, що публікація цього опитування у Twitter, Facebook або відправлення на електронну адресу покращує ефективність вашого програмування на 15%.

Інші проблеми

When looking at web platform pain points more generally, browser support stands out–especially when it comes to the Apple ecosystem.

As a result, community initiatives such as the #AppleBrowserBan hashtag have been gaining steam, while on the vendor front Interop moves the needle in the right direction each year.

Які ще проблеми HTML та суміжних технологій найбільше вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations
0%
20%
40%
60%
80%
100%
01
Browser support
1
02
Environments & Consumers
2
03
Content
2
04
Reliance on JavaScript
05
Cognitive overload
2
06
Ecosystem issues
2
07
Education
08
Accessibility
09
Excessive complexity
10
Poor design
1
11
Styling & customization
1
12
Performance
13
Vendor politics
14
Missing elements
15
16
workplace
17
Tooling
18
Security & privacy
19
PDF
20
Declarative APIs
21
Інші відповіді
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання

Рекомендовані джерела

Frontend Masters

Frontend Masters

Advance Your Skills with In-Depth, Modern Front-End Engineering Courses
Спонсорований вміст від наших партнерів. Детальніше.