Özellikler, HTML'ye Genel Bakış bölümünde kısaca ele alındı. Şimdi ayrıntılı bir incelemenin zamanı geldi.
Özellikler, HTML'yi güçlü kılan unsurlardır. Özellikler, açılış etiketinde görünen boşlukla ayrılmış adlar ve ad/değer çiftleridir. Öğeler hakkında bilgiler ve işlevler sağlar.
Özellikler öğelerin davranışını, bağlantılarını ve işlevlerini tanımlar. Bazı özellikler globaldir. Diğer bir deyişle, herhangi bir öğenin açılış etiketinde görünebilir. Bazı özellikler ise tüm öğeler için geçerli olmasa da birkaç öğe için geçerlidir. Diğer özellikler ise öğeye özgüdür ve yalnızca tek bir öğeyle alakalıdır. HTML'de, boole hariç tüm özellikler ve bir ölçüde numaralandırılmış özellikler için değer gerekir.
Bir özellik değeri boşluk veya özel karakterler içeriyorsa değerin tırnak içine alınması gerekir. Bu nedenle yazıların daha rahat okunabilmesi için her zaman alıntılar yapmanız önerilir.
HTML büyük/küçük harfe duyarlı olmasa da bazı özellik değerleri duyarlıdır. HTML spesifikasyonunun bir parçası olan değerler büyük/küçük harfe duyarlı değildir. Tanımlanan dize değerleri (sınıf ve kimlik adları gibi) büyük/küçük harfe duyarlıdır. Bir özellik değeri HTML'de büyük/küçük harfe duyarlıysa, CSS ve JavaScript'te özellik seçicinin parçası olarak kullanıldığında büyük/küçük harfe duyarlıdır. Aksi takdirde, büyük/küçük harfe duyarlı değildir.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Boole özellikleri
Bir boole özelliği mevcutsa bu özellik her zaman doğru olur. Boole özellikleri arasında şunlar bulunur: autofocus
, inert
, checked
, disabled
,
required
, reversed
, allowfullscreen
, default,
loop
, autoplay
, controls
, muted
, readonly
, multiple,
ve selected
.
Bu özelliklerden biri (veya daha fazlası) mevcutsa öğe devre dışı, gerekli, salt okunur vb. durumlarla karşı karşıyadır. Mevcut değilse bu öğe yoktur.
Boole değerleri atlanabilir, boş bir dizeye ayarlanabilir veya özelliğin adı olabilir. Ancak değerin gerçekten true
dizesine ayarlanması gerekmez. true
, false
ve 😀
dahil olmak üzere tüm değerler geçersizken doğru olarak çözümlenir.
Bu üç etiket eşdeğerdir:
<input required>
<input required="">
<input required="required">
Özellik değeri yanlışsa özelliği çıkarın. Özellik doğruysa özelliği ekleyin ancak değer sağlamayın.
Örneğin, required="required"
HTML'de geçerli bir değer değildir; ancak required
boole olduğundan, geçersiz değerler doğru olarak çözümlenir.
Ancak, geçersiz numaralanmış özellikler eksik değerlerle aynı değere çözümlenmeyebilir. Bu nedenle, değerleri atlamayı alışkanlık haline getirmek, hangi özelliklerin boole ile numaralanmış olduğunu ve geçersiz bir değer sağlayabileceğini hatırlamaktan daha kolaydır.
Doğru ve yanlış arasında geçiş yaparken, değeri değiştirmek yerine özelliği JavaScript kullanarak ekleyip tamamen kaldırın.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
SVG gibi XML dillerinde, boole özellikleri dahil olmak üzere tüm özelliklerin bir değer içermesi gerektiğini unutmayın.
Numaralanmış özellikler
Numaralanmış özellikler bazen boole özellikleriyle karıştırılır. Bunlar, önceden tanımlanmış sınırlı bir geçerli değer grubuna sahip olan HTML özellikleridir.
Boole özelliklerinde olduğu gibi, özellik mevcutsa ancak değer eksikse varsayılan bir değere sahip olurlar. Örneğin, <style contenteditable>
eklerseniz varsayılan olarak <style contenteditable="true">
olur.
Bununla birlikte, boole özelliklerinden farklı olarak, özelliğin atlanması yanlış olduğu anlamına gelmez; eksik bir değere sahip mevcut bir özellik her zaman doğru olmayabilir ve geçersiz değerler için varsayılan değer, boş dizeyle aynı olmayabilir. Örnekten devam edersek contenteditable
, eksik veya geçersizse varsayılan olarak inherit
değerine ayarlanır ve false
değerine ayarlanabilir.
Varsayılan değer özelliğe bağlıdır. Boole değerlerinin aksine özellikler varsa otomatik olarak "true" olmaz. <style contenteditable="false">
özelliğini eklerseniz bu öğe düzenlenemez. Değer geçersizse (ör. <style contenteditable="😀">
) veya şaşırtıcı şekilde <style contenteditable="contenteditable">
ise geçersiz olur ve varsayılan olarak inherit
olur.
Numaralanmış özelliklerin olduğu çoğu durumda eksik ve geçersiz değerler aynıdır. Örneğin, bir <input>
öğesinde type
özelliği eksikse, mevcutsa ancak değer olmadan ya da geçersiz bir değere sahipse varsayılan olarak text
olur. Bu davranış yaygın olsa da bir kural değildir.
Bu nedenle, hangi özelliklerin boole ve numaralanmış olduğunu bilmek önemlidir; yanlış anlamamak için mümkünse değerleri çıkarın ve gerektiğinde değeri arayın.
Genel özellikler
Genel özellikler, <head>
içindeki öğeler de dahil olmak üzere tüm HTML öğelerinde ayarlanabilen özelliklerdir. 30'dan fazla genel özellik bulunmaktadır. Bunların tümü teoride herhangi bir HTML öğesine eklenebilir ancak bazı genel özellikler, bazı öğelerde ayarlandığında herhangi bir etki göstermez. Örneğin, bir <meta>
öğesine meta içerik görüntülenmediği için hidden
politikasının ayarlanması.
id
id
genel özelliği, bir öğe için benzersiz bir tanımlayıcı tanımlamak amacıyla kullanılır. Aşağıdakiler dahil olmak üzere birçok amaca hizmet eder:
- Bir bağlantının parça tanımlayıcısının hedefi.
- Senaryo yazma için bir öğe tanımlama.
- Bir form öğesini etiketiyle ilişkilendirme.
- Yardımcı teknolojiler için bir etiket veya açıklama sağlayabilirsiniz.
- CSS'de yüksek spesifikliğe sahip veya özellik seçici olarak hedefleme stilleri.
id
değeri, boşluk içermeyen bir dizedir. Doküman boşluk içeriyorsa doküman bölünmez ancak HTML, CSS ve JS'nizde id
öğesini kaçış karakterleriyle hedeflemeniz gerekir. Diğer tüm karakterler geçerlidir. id
değeri, 😀
veya .class
olabilir ancak iyi bir fikir değildir. Programlamayı mevcut ve gelecekteki kendiniz için kolaylaştırmak istiyorsanız id
'nin ilk karakterini harf yapın ve yalnızca ASCII harfleri, rakamlar, _
ve -
kullanın. id
değerleri büyük/küçük harfe duyarlı olduğundan, bir id
adlandırma kuralı bulmak ve ardından bu kurala uymak iyi bir uygulamadır.
id
, dokümana özgü olmalıdır. id
öğesi birden fazla kez kullanılırsa sayfanızın düzeni muhtemelen bozulmaz ancak JavaScript, bağlantılar ve öğe etkileşimleriniz beklendiği gibi çalışmayabilir.
Bağlantı parçası tanımlayıcısı
Gezinme çubuğunda dört bağlantı bulunur. Bağlantı öğesini daha sonra ele alacağız ancak şimdilik bağlantıların HTTP tabanlı URL'lerle sınırlı olmadığını fark ettik. Bunlar, mevcut dokümanda (veya diğer dokümanlarda) sayfa bölümlerinin parça tanımlayıcıları olabilir.
Makine öğrenimi atölyesinin sitesinde, sayfa başlığındaki gezinme çubuğunda dört bağlantı bulunur:
href özelliği, bağlantıyı etkinleştirdiğinizde kullanıcıyı yönlendiren köprüyü sağlar. Bir URL'nin önünde bir karakter dizesi (#
) ve ardından gelen bir karakter dizesi bulunuyorsa bu dize parça tanımlayıcısıdır. Bu dize, web sayfasındaki bir öğenin id
öğesiyle eşleşirse parça, söz konusu öğeye bir tutturma veya yer işareti olur. Tarayıcı, sabit öğenin tanımlandığı noktaya kaydırır.
Bu dört bağlantı, sayfamızın id
özellikleriyle tanımlanan dört bölümüne yönlendirir. Kullanıcı, gezinme çubuğundaki dört bağlantıdan birini tıkladığında, parça tanımlayıcısıyla bağlanan öğe, eşleşen kimliği içeren öğe (#
) görünümün içine kaydırır.
Makine öğrenimi atölyesinin <main>
içeriğinde, kimliklerin yer aldığı dört bölüm bulunur. Site ziyaretçisi <nav>
içindeki bağlantılardan birini tıkladığında bu parça tanımlayıcısını içeren bölüm görünümün içine kaydırılır. İşaretleme şuna benzer:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
<nav>
bağlantılarındaki parça tanımlayıcıları karşılaştırıldığında, her birinin <main>
içindeki bir <section>
öğesinin id
ile eşleştiğini görürsünüz.
Tarayıcı bize ücretsiz bir "sayfanın üst kısmı" bağlantısı sağlar. href="#top"
, büyük/küçük harfe duyarlı değil veya sadece href="#"
değeri ayarlanırsa kullanıcıyı sayfanın en üstüne kaydırır.
href
içindeki karma işareti ayırıcısı, parça tanımlayıcısının bir parçası değil. Parça tanımlayıcısı her zaman URL'nin son bölümüdür ve sunucuya gönderilmez.
CSS seçiciler
CSS'de, her bölümü #feedback
gibi bir kimlik seçici veya daha az belirginlik için büyük/küçük harfe duyarlı bir özellik seçici ([id="feedback"]
) kullanarak hedefleyebilirsiniz.
Senaryo Yazma
MLW.com'da yalnızca fare kullanıcıları için bir paskalya yumurtası bulunuyor. Işık anahtarını tıkladığınızda sayfa açılır ve kapanır.
Işık anahtarı resmi için işaretleme:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
id
özelliği, getElementById()
yöntemi için parametre olarak ve #
önekiyle birlikte querySelector()
ile querySelectorAll()
yöntemlerine ait bir parametrenin parçası olarak kullanılabilir.
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Tek JavaScript işlevimiz, öğeleri id
özelliklerine göre hedefleme özelliğinden yararlanır:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
HTML <label>
öğesi, değeri olarak, ilişkilendirildiği form kontrolünün id
değerini alan bir for
özelliğine sahip.
Her form kontrolüne id
ekleyerek ve her birini etiketin for
özelliğiyle eşleyerek açık bir etiket oluşturmak, her form kontrolünün ilişkili bir etiketine sahip olmasını sağlar.
Her etiket tam olarak bir form kontrolüyle ilişkilendirilebilse de bir form kontrolünün birden fazla ilişkilendirilmiş etiketi olabilir.
Form kontrolü <label>
açılış ve kapanış etiketleri arasına iç içe yerleştirilmişse for
ve id
özellikleri gerekli değildir: Buna "örtülü" etiket denir. Etiketler, tüm kullanıcılara her form kontrolünün neyle ilgili olduğunu bildirir.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
for
ile id
arasındaki ilişkilendirme, bilgileri yardımcı teknolojilerin kullanıcılarına sunar. Ayrıca, bir etikette herhangi bir yeri tıklamak, odağı ilişkili öğeye vererek kontrolün tıklama alanını genişletir. Bu sadece ellerini kullanma konusunda sorun yaşayan kişiler için değil, aynı zamanda fareyi bir radyo düğmesinden daha geniş parmakla kullanan her mobil cihaz kullanıcısına da yardımcı olur.
Bu kod örneğinde, sahte bir testteki sahte beşinci soru, çoktan seçmeli tek bir sorudur. Her form kontrolünün her biri için benzersiz bir id
içeren açık bir etiketi vardır. Bir kimliği yanlışlıkla çoğaltmamızı önlemek için, id değeri soru numarası ile değerin birleşimidir.
Radyo düğmeleri eklerken etiketler radyo düğmelerinin değerini açıkladığından <fieldset>
içindeki tüm aynı adı taşıyan düğmeleri kapsarız. <legend>
öğesi, tüm grup için etiket veya sorudur.
Diğer erişilebilirlik kullanımları
Erişilebilirlik ve kullanılabilirlik açısından id
kullanımı etiketlerle sınırlı değildir. Metnin tanıtımında bir <section>
, erişilebilir adı sağlamak amacıyla <section>
öğesinin aria-labelledby
değeri olarak <h2>
öğesinin id
öğesine referans verilerek bölge yer işaretine dönüştürüldü:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Erişilebilirliği sağlamak için 50'den fazla aria-*
durumu ve özelliği mevcuttur. aria-labelledby
, aria-describedby
,
aria-details
ve aria-owns
değerleri boşlukla ayrılmış id
referans listesini alır. O anda odaklanılmış alt öğeyi tanımlayan aria-activedescendant
, değeri olarak tek bir id
referansı alır: Odaklanmış tek bir öğenin referansıdır (aynı anda yalnızca bir öğeye odaklanabilir).
class
class
özelliği, CSS (ve JavaScript) ile öğeleri hedeflemek için ek bir yol sağlar, ancak HTML'de başka bir amaca hizmet etmez (ancak çerçeveler ve bileşen kitaplıkları bunları kullanabilir). class özelliği, değeri olarak öğe için büyük/küçük harfe duyarlı sınıfların boşlukla ayrılmış bir listesini alır.
Ses semantik yapısı oluşturmak, öğelerin yerleşimlerine ve işlevlerine göre hedeflenebilmesini sağlar. Ses yapısı; alt öğe seçicilerin, ilişkisel seçicilerin ve özellik seçicilerin kullanılmasını sağlar. Bu bölümde özellikler hakkında bilgi edinirken aynı özelliklere veya özellik değerlerine sahip öğelerin stillerini nasıl belirleyebileceğinizi düşünün. Mesele, class özelliğini kullanmamanız değildir. Çoğu geliştirici, genellikle buna gerek olmadığını fark etmez.
MLW şimdiye kadar herhangi bir sınıf kullanmadı. Site tek bir sınıf adı olmadan kullanıma sunulabilir mi? Göreceğiz.
style
style
özelliği, özelliğin ayarlandığı tek öğeye uygulanan stiller olan satır içi stillerin uygulanmasını sağlar.
style
özelliği, değer CSS özellik değer çiftlerini alır ve değerin söz dizimi, CSS stil bloğunun içeriğiyle aynıdır: CSS'de olduğu gibi özelliklerin ardından iki nokta işareti bulunur ve her bir noktalı virgül, değerden sonra gelir.
Stiller, yalnızca özelliğin ayarlandığı öğeye uygulanır. İç içe yerleştirilmiş öğelerdeki veya <style>
bloklarındaki ya da stil sayfalarındaki diğer stil bildirimleri, alt öğelerin devralınan özellik değerlerini devralması durumunda uygulanır. Değer, yalnızca bu öğeye uygulanan tek bir stil bloğunun içeriğinin eşdeğerini oluşturduğundan, oluşturulan içerik için, animasyon karesi animasyonları oluşturmak veya başka herhangi bir kural uygulamak amacıyla kullanılamaz.
style
genel bir özellik olsa da bunun kullanılması önerilmez. Bunun yerine, stilleri ayrı bir dosya veya dosyalarda tanımlayın.
Bununla birlikte, style
özelliği, test amacıyla olduğu gibi hızlı biçimlendirme özelliklerini sağlamak için geliştirme sırasında faydalı olabilir. Ardından, "çözüm" stilini alın ve bağlı CSS dosyanıza yapıştırın.
tabindex
tabindex
özelliği, odağı almasını sağlamak için herhangi bir öğeye eklenebilir. tabindex
değeri, öğenin sekme sıralamasına ve isteğe bağlı olarak varsayılan olmayan bir sekme sıralaması sırasına eklenip eklenmeyeceğini tanımlar.
tabindex
özelliği, değeri olarak bir tam sayı alır. Negatif bir değer (normallik -1
kullanmaktır), bir öğenin JavaScript aracılığıyla olduğu gibi odak alma özelliğine sahip olmasını sağlar, ancak öğeyi sekme oluşturma sırasına eklemez. tabindex
değerinin 0
olması, öğeyi sekme oluşturma yoluyla odaklanabilir ve erişilebilir hale getirir ve öğeyi kaynak kodu sırasında sayfanın varsayılan sekme sırasına ekler. 1
veya daha yüksek bir değer, öğeyi öncelikli bir odak dizisine yerleştirir ve önerilmez.
Bu sayfada, <button>
işlevi gören bir <share-action>
özel öğesi kullanan paylaşım işlevi bulunmaktadır. Özel öğeyi klavyenin varsayılan sekme oluşturma sırasına eklemek için sıfırın tabindex
değeri dahil edilir:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
button
/role
, ekran okuyucu kullanıcılarına bu öğenin bir düğme gibi davranması gerektiğini bildirir. JavaScript, düğme işlevselliğinin vadettiğinden emin olmak için kullanılır. click ve keydown etkinliklerinin yanı sıra Enter ve Boşluk tuşlarına basma işlemleri de bu kapsamdadır.
Form denetimleri, bağlantılar, düğmeler ve düzenlenebilir içerik öğelerine odaklanılabilir. Bir klavye kullanıcısı sekme tuşuna bastığında odak, tabindex="0"
ayarlanmış gibi bir sonraki odaklanılabilir öğeye geçer. Diğer öğelere varsayılan olarak odaklanılamaz. Bu öğelere tabindex
özelliği eklemek, aksi takdirde olmayacakları zamanlarda odak almalarını sağlar.
Bir doküman, 1
veya daha yüksek bir tabindex
değerine sahip öğeler içeriyorsa bunlar ayrı bir sekme sırasına eklenir. Kod kaleminde göreceğiniz gibi, sekme işlemleri en düşük değerden en yüksek değere doğru sırayla ayrı bir sırada başlar ve bu sırayla kaynak sırasına göre normal diziden geçer.
Sekme sırasının değiştirilmesi gerçekten kötü bir kullanıcı deneyimine yol açabilir. İçeriğinizde gezinmek için yardımcı teknolojilere (klavyeler ve ekran okuyucular) güvenmeyi zorlaştırır. Bir geliştirici olarak bunu yönetmek ve sürdürmek de zordur. Odak önemlidir. Odaklanma ve odaklanma sırasının tartışıldığı bütün bir modül vardır.
role
role
özelliği, whatWG HMTL spesifikasyonu yerine ARIA spesifikasyonunun bir parçasıdır. role
özelliği, içeriğe anlamsal anlam sağlamak için kullanılabilir. Böylece ekran okuyucular, sitenin kullanıcılarını bir nesnenin beklenen kullanıcı etkileşimi hakkında bilgilendirebilir.
Yerel HTML eşdeğeri olmayan birleşik kutular, menü çubukları, sekme listeleri ve treegridler gibi yaygın birkaç kullanıcı arayüzü widget'ı vardır.
Örneğin, sekmeli tasarım deseni oluştururken tab
, tablist
ve tabpanel
rolleri kullanılabilir. Kullanıcı arayüzünü fiziksel olarak görebilen bir kişi, widget'ta nasıl gezineceğini ve ilgili sekmeleri tıklayarak farklı panelleri nasıl görünür hale getireceğini deneyimle öğrenmiştir.
Farklı panelleri göstermek için bir grup düğme kullanıldığında <button role="tab">
ile tab
rolünün eklenmesi, ekran okuyucuya o anda odaklanılan <button>
öğesinin, düğme benzeri tipik bir işlev uygulamak yerine ilgili paneli görünüme geçirebileceğini anlamasını sağlar.
role
özelliği tarayıcı davranışını değiştirmez veya klavye ya da işaretçi cihazı etkileşimlerini değiştirmez. Bir <span>
öğesine role="button"
eklenmesi, <button>
değerine dönüştürülmez. Bu nedenle, anlamsal HTML öğelerini amaçlarına uygun şekilde kullanmanız önerilir. Bununla birlikte, doğru öğenin kullanılması mümkün olmadığında role
özelliği, anlamsal olmayan bir öğenin semantik bir öğenin rolüne yeniden yerleştirildiği durumlarda ekran okuyucu kullanıcılarını bilgilendirmeyi sağlar.
contenteditable
contenteditable
özelliği true
olarak ayarlanmış bir öğe düzenlenebilir, odaklanılabilir ve tabindex="0"
ayarlanmış gibi sekme sıralamasına eklenir. Contenteditable
, true
ve false
değerlerini destekleyen numaralanmış bir özelliktir. Özellik yoksa veya geçersiz bir değere sahipse varsayılan değer inherit
olur.
Şu üç açılış etiketi eşdeğerdir:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
<style contenteditable="false">
eklerseniz öğe, varsayılan olarak düzenlenebilir (<textarea>
gibi) olmadığı sürece düzenlenemez.
<style contenteditable="😀">
veya <style contenteditable="contenteditable">
gibi bir değer geçersizse değer varsayılan olarak inherit
olur.
Durumlar arasında geçiş yapmak için HTMLElement.isContentEditable salt okunur özelliğinin değerini sorgulayın.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Alternatif olarak, bu özellik, editor.contentEditable
öğesinin true
, false
veya inherit
değerine ayarlanmasıyla da belirtilebilir.
Genel özellikler, <style>
öğeleri dahil olmak üzere tüm öğelere uygulanabilir. Canlı bir CSS düzenleyici oluşturmak için özellikleri ve biraz CSS'yi kullanabilirsiniz.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
style
öğesinin color
öğesini inherit
dışında bir değer olarak değiştirmeyi deneyin. Ardından, style
öğesini p
seçicisiyle değiştirmeyi deneyin.
Görüntüleme özelliğini kaldırmayın. Aksi takdirde stil bloğu kaybolur.
Özel özellikler
HTML global özelliklerinin yalnızca yüzeyine değindik. Yalnızca bir veya sınırlı bir öğe grubu için geçerli olan başka özellikler de vardır. Yüzlerce tanımlanmış özellik olsa bile spesifikasyonda bulunmayan bir özelliğe ihtiyacınız olabilir. HTML'de aradığınızı bulabilirsiniz.
data-
önekini ekleyerek istediğiniz özel özelliği oluşturabilirsiniz. Özelliğinizi data-
ile başlayan herhangi bir adın ardından xml
ile başlamayan ve iki nokta üst üste (:
) içermeyen küçük harfli karakter serisiyle adlandırabilirsiniz.
data
ile başlamayan, desteklenmeyen özellikler oluşturursanız veya özel özelliğinizi xml
ile başlatsanız ya da :
dahil etseniz bile HTML hoşgörüdür ve bozulmaz. Bununla birlikte, data-
ile başlayan geçerli özel özellikler oluşturmanın bazı avantajları vardır.
Özel veri özellikleriyle, mevcut bir özellik adını yanlışlıkla kullanmadığınızı bilirsiniz. Özel veri özellikleri geleceğe hazırdır.
Tarayıcılar, data-
ön ekli belirli özellikler için varsayılan davranışları uygulamaz ancak özel özellikleriniz üzerinden iterasyon yapabileceğiniz yerleşik bir veri kümesi API'si bulunur. Özel özellikler, uygulamaya özgü bilgileri JavaScript aracılığıyla iletmenin mükemmel bir yoludur. Öğelere data-name
biçiminde özel özellikler ekleyin ve bunlara söz konusu öğede dataset[name]
kullanarak DOM aracılığıyla erişin.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Tam özellik adını kullanarak getAttribute()
özelliğini kullanabilir veya daha basit olan dataset
özelliğinden yararlanabilirsiniz.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
dataset
özelliği, her bir öğenin data-
özelliklerinden bir DOMStringMap
nesnesi döndürür. <blockquote>
üzerinde birkaç
özel özellik var. Veri kümesi özelliği, adlarına ve değerlerine erişmek için bu özel özelliklerin ne olduğunu bilmenize gerek olmadığı anlamına gelir:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Bu makaledeki özellikler geneldir. Diğer bir deyişle, herhangi bir HTML öğesine uygulanabilir (ancak hepsinin bu öğeler üzerinde etkisi yoktur). Sırada, giriş resminde yer almadığımız iki özelliğe (target
ve href
) ve bağlantıları daha ayrıntılı olarak incelerken öğeye özgü diğer birçok özelliğe bakacağız.
Öğrendiklerinizi sınayın
Özelliklerle ilgili bilginizi test edin.
Dokümanda id
öğesi benzersiz olmalıdır.
Doğru biçimlendirilmiş özel özelliği seçin.
data-birthday
birthday
data:birthday