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

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

Як ви використовуєте 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 браузера ви не можете користуватися через відмінності між браузерами або недостатнє підтримування?
Множинний вибір
Top pain point topics corresponding to specific web platform features.

View:

Items tagged “features
0%
20%
40%
60%
80%
100%
1
2
<select>
+4
3
-1
4
5
+7
6
-1
7
-3
8
+2
9
<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 браузера ви не можете користуватися з інших причин (і чому)?
Множинний вибір
Top pain point topics corresponding to specific web platform features.

View:

Items tagged “features
0%
20%
40%
60%
80%
100%
1
<select>
2
<input type="date">
3
+5
4
5
-1
6
+1
7
<select multiple>
8
-2
9
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%
1
Таблиця для даних
1,545
2
Комбінований список / Елемент автодоповнення
1,249
3
Вкладки
-1
1,182
4
Випадне меню
1,071
5
Rich text editor
975
6
Перемикач (Switch / Toggle)
-3
957
7
HTML include
920
8
Sortable drag-and-drop list
910
9
Каркасний 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%
1
<select>
1,699
2
<input type="date">
1,178
3
<select multiple>
792
4
791
5
Проблеми валідації
491
6
432
7
<input type="time">
401
8
369
9
<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.

Do you use any of the following design system strategies to maintain UI consistency?
Множинний вибір
0%
20%
40%
60%
80%
100%
1
Elements/components
3,084
2
Design tokens
2,664
3
Utilities
2,407
4
Guidelines
2,008
5
Patterns
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%
1
Вебзастосунки
3,378
2
Блоги чи інші сайти з великою кількістю тексту
2,253
3
Сайти для продажу та сторінки-вітрини
1,894
4
Дизайн-системи
1,519
5
Електронні листи
1,139
6
Застосунки для настільних комп'ютерів
891
7
Застосунки для мобільних пристроїв
879
8
Документи для друку
659
9
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 та суміжних технологій найбільше вас розчаровують?
Множинний вибір
Top pain point topics overall.

View:

Items that are not one of “limitations
0%
20%
40%
60%
80%
100%
1
Browser support
1
2
Environments & Consumers
2
3
Content
2
4
Reliance on JavaScript
5
Cognitive overload
2
6
Ecosystem issues
2
7
Education
8
Accessibility
9
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
Спонсорований вміст від наших партнерів. Детальніше.