İçeriğe atla

Kullanım

HTML'i nasıl kullandığınız.

Tarayıcı Uyumluluğu

Web platformunun durumu ile gerçek dünyada benimsenmesi arasında her zaman biraz gecikme olur, bu nedenle Popover API'ın hala sıralamada ilk sırada olması şaşırtıcı değil. Şüphesiz, bu özellik resmi olarak “Yeni Kullanılabilir” Temel Durumuna sahiptir, yani bundan sonra tarayıcılar arasında kullanılması daha az sorun teşkil edeceği kesindir.

Tarayıcı farklılıkları veya destek eksikliği nedeniyle kullanamadığınız mevcut HTML özellikleri veya tarayıcı API'leri hangileridir?
Multiple
Top pain point topics corresponding to specific web platform features.

View:

Items tagged “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%
% of question respondents

Sınırlı Fonksiyonellik

Form kontrolleri ve diğer etkileşimli öğeler yine en kısıtlayıcı olarak algılanan öğelerdir. Özelleştirilebilir seçimler ortadan kalktığına göre, belki de tarih seçiciler bir sonraki hedef olmalı gibi görünüyor.

Hangi mevcut HTML özelliklerini veya tarayıcı API'lerini başka nedenlerle kullanamıyorsunuz (ve neden)?
Multiple
Top pain point topics corresponding to specific web platform features.

View:

Items tagged “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%
% of question respondents

Eksik Elementler

Bu yıl da datatable en çok talep edilen yeni öğe oldu. Yerleşik filtreleme, sıralama, arama vb. özelliklerin olması kesinlikle güzel olurdu, ancak bu özelliklerin yakın zamanda hayata geçeceği pek olası görünmüyor.

Öte yandan, yerel switch öğesi gibi diğer uzun zamandır beklenen özelliklerde ilerleme kaydediliyor, bu da sıralamadaki düşüşünü açıklıyor.

HTML'e 3 element ekleyebilseydiniz, bunlar neler olurdu?
Multiple
0%
20%
40%
60%
80%
100%
01
Data table (with sorting, filtering, etc.)
1,545
02
Combobox / Autocomplete
1,249
03
Tabs
-1
1,182
04
Dropdown Menu
1,071
05
Rich text editor
975
06
Switch / Toggle
-3
957
07
HTML include
920
08
Sortable drag-and-drop list
910
09
Skeleton UI / Loading Placeholder
-5
728
10
Context Menu / Right-Click Menu
-5
719
0%
20%
40%
60%
80%
100%
% of question respondents

Styling Issues

Form girişlerinin stil vermek için en zor öğeler listesinin başında yer alması şaşırtıcı değil. Neyse ki, customizable select öğeleri üzerinde çalışılmaktadır, ancak tarayıcı desteği hala yetersizdir.

Which elements do you struggle the most to style or visually customize?
Multiple
0%
20%
40%
60%
80%
100%
01
<select>
1,699
02
<input type="date">
1,178
03
<select multiple>
792
04
791
05
Validation errors
491
06
432
07
<input type="time">
401
08
369
09
<input type="range">
317
10
314
0%
20%
40%
60%
80%
100%
% of question respondents

HTML Reuse

JavaScript bileşenlerinin web üzerinde kullanıcı arayüzleri oluşturmanın baskın paradigması haline geldiğini inkar etmek zor. Evet, tüm bu rakip front-end frameworkleri ile uğraşmak karmaşık olabilir, ancak bu bizim bildiğimiz (ve belki de sevdiğimiz?) bir karmaşadır. Bu durum, web bileşenlerinin dördüncü sıranın ötesine geçmesini zorlaştırmaktadır.

Which strategies do you use to implement components or otherwise reuse HTML code?
Multiple
0%
20%
40%
60%
80%
100%
1
Component-based JavaScript Frameworks
2,696
2
Server-side templating
1,922
3
Client-side templating
1,297
4
1,237
5
Build-time templating
1,184
6
Copy-paste
914
7
Web Components helper libraries
492
8
🚫 Yok
44
9
Other Answers
69
0%
20%
40%
60%
80%
100%
% of question respondents

Design Systems

Tasarım sistemleri, çoğu büyük ölçekli proje için bir gereklilik haline gelmiştir ve bu gerçek, tüm bu çeşitli yaklaşımların popülaritesine de yansımaktadır.

Do you use any of the following design system strategies to maintain UI consistency?
Multiple
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
🚫 Yok
112
7
Other Answers
45
0%
20%
40%
60%
80%
100%
% of question respondents

HTML/CSS ve JavaScript/TypeScript Dengesi

Yukarıdaki “Bileşen Stratejileri” tablosunda gösterildiği gibi, JavaScript, ürettiğimiz HTML kodlarının çoğunun fiili taşıyıcısıdır. Bu da neden bu kadar çok zamanımızı onu yazmaya harcadığımızı açıklıyor!

HTML/CSS ve JavaScript/TypeScript kodu yazarken zamanınızı nasıl bölüyorsunuz?
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%
% of question respondents

HTML Kullanımı

Anket katılımcılarının çoğu dinamik web uygulamaları üzerinde çalışsa da, çoğumuz bloglar veya diğer metin ağırlıklı siteler oluşturmak için de zaman harcıyoruz. Bu da HTML'nin belge odaklı bir dil olarak köklerine geri dönmemizi sağlıyor.

HTML'i ne için kullanıyorsunuz?
Multiple
0%
20%
40%
60%
80%
100%
01
Web apps
3,378
02
Blogs or other text-heavy sites
2,253
03
Marketing sites & landing pages
1,894
04
Design systems
1,519
05
Emails
1,139
06
Desktop apps
891
07
Mobile apps
879
08
Printed documents
659
09
E-Commerce sites
10
🚫 Yok
16
11
Other Answers
114
0%
20%
40%
60%
80%
100%
% of question respondents
💡
Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%.

HTML ile ilgili diğer sıkıntı yaratan noktalar

Web platformunun sorunlu noktalarını daha genel olarak ele aldığımızda, tarayıcı desteği öne çıkıyor – özellikle Apple ekosistemi söz konusu olduğunda.

Sonuç olarak, #AppleBrowserBan hashtag'i gibi topluluk girişimleri ivme kazanırken, sağlayıcılar cephesinde Interop her yıl doğru yönde adımlar atmaktadır.

HTML ve ilgili teknolojileri kullanırken sıkıntı yaratan noktalar nelerdir?
Multiple
Top pain point topics overall.

View:

Items that are not one of “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
Other Answers
0%
20%
40%
60%
80%
100%
% of question respondents

Recommended Resources

Frontend Masters

Frontend Masters

Advance Your Skills with In-Depth, Modern Front-End Engineering Courses
Sponsored content from our partners. Learn more.