Özel öğeler geçerli HTML5 mi?

Özel etiketlerin HTML5'te geçerli olup olmadığı konusunda kesin bir cevap bulamadım:

<greeting>Hello!</greeting>

Ben şu ya da bu şekilde hiçbir şey bulamadım:

http://dev.w3.org/html5/spec/single-page.html

Özel etiketlerin W3C doğrulayıcı ile doğrulanmadığı görülüyor.

Özel Öğeler şartname Chrome ve Opera mevcuttur ve mevcut kazanan bir konudur diğer tarayıcılar . Özel öğeleri resmi bir şekilde kaydetmek için bir yol sağlar.

Özel öğeler, yazarlar tarafından tanımlanabilecek yeni DOM öğesi türleridir. Vatansız ve geçici olan dekoratörlerin aksine , özel öğeler durumu kapatabilir ve komut dosyası arabirimleri sağlayabilir.

Özel öğeler, Şablonlar, HTML İçe Aktarmaları ve Gölge DOM ile birlikte Web Bileşenleri adı verilen daha büyük bir W3 belirtiminin bir parçasıdır .

Web Bileşenleri, Web uygulaması yazarlarının, yalnızca CSS ile mümkün olmayan bir görsel zenginlik ve etkileşim düzeyine sahip widget'ları tanımlamasını ve günümüzde komut dosyası kitaplıklarıyla kompozisyon kolaylığı ve yeniden kullanımı mümkün değildir.

Bununla birlikte, Google Developers ile Custom Elements v1 hakkındaki bu mükemmel makaleden :

Özel bir öğenin adı bir tire ( -) içermelidir . Yani <x-tags>,, <my-element>ve <my-awesome-app>hepsi geçerli isimler, while <tabs>ve <foo_bar>değildir. Bu gereksinim, HTML ayrıştırıcısının özel öğeleri normal öğelerden ayırt edebilmesidir. Ayrıca, HTML'ye yeni etiketler eklendiğinde ileri uyumluluk sağlar.

Bazı Kaynaklar

• Örnek Web Bileşenlerine https://WebComponents.org adresinden ulaşılabilir.
• WebComponents.js , Web Bileşenleri için her yerde desteklenene kadar çoklu dolgu işlevi görür. Ayrıca bkz. WebComponents.js github sayfası ve web tarayıcısı destek tablosu .

Mümkün ve izin veriliyor:

Kullanıcı aracıları anlamsal olarak nötr olarak anlamadıkları öğelere ve niteliklere davranmalıdır; bunları DOM'da (DOM işlemcileri için) bırakarak ve CSS'ye (CSS işlemcileri için) göre şekillendirir, ancak onlardan herhangi bir anlam çıkarmaz.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Ancak, etkileşim eklemek istiyorsanız, IE'nin 7 ve 8'ini karşılamak için belgenizi geçersiz (ancak yine de tamamen işlevsel) hale getirmeniz gerekir.

Bkz. Http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (blogum)

Not Aşağıdaki cevap 2012'de yazıldığı zaman doğruydu. O zamandan beri işler biraz ilerledi. HTML spesifikasyonu artık iki tür özel öğe tanımlamaktadır: "otonom özel öğeler" ve "özelleştirilmiş yerleşik öğeler". Birincisi, içerik ifadesi beklenen her yere gidebilir; vücudun içinde çoğu yer olan, ancak örneğin ul veya ol elemanlarının çocukları veya td, th veya altyazı elemanları dışındaki tablo elemanlarında olmayan. İkincisi, genişlettikleri elemanın nereye gidebileceği yere gidebilir.

Bu aslında öğelerin içerik modelinin birikiminin bir sonucudur.

Örneğin, kök öğe bir htmlöğe olmalıdır .

htmlElemanı sadece içerebilir , bir gövde elemanının ve ardından bir kafa elemanı.

bodyElemanı sadece içerebilir Akış içerik akışı içerik öğeleri olarak tanımlanır: adres, alan (bir harita öğesinin torunu ise), makale, bir yana, ses, b, bdi, bdo, blok alıntı, br, düğme, tuval, alıntı, kodu, komut, veri listesi, del, ayrıntılar dfn, div dl, em, gömme, alan kümesi, şekil, altbilgi, form, h1, h2, h3, h4, h5, h6, üstbilgi, hgroup, hr, i, iframe, img, giriş, ins, kbd, keygen, etiket, harita, işaret, matematik, menü, metre, nav, noscript, nesne, ol, çıktı, p, öncesi, ilerleme, q, yakut, s, örnekleme, komut dosyası, bölüm, seçin, küçük, açıklık, güçlü, stil ( kapsamlandırılmış özellik varsa), alt, sup, svg, tablo, metin, zaman,u, ul, var, video, wbr ve Metin

ve bunun gibi.

İçerik modeli hiçbir zaman özel öğelere / etiketlere ihtiyaç duyacağınız "bu öğeye istediğiniz öğeleri koyabilirsiniz" demez.

Temel Özel Öğeler ve Nitelikler

Özel öğeler ve öznitelikler HTML'de geçerlidir, ancak:

• Öğe adları küçük harfle başlar ve ile başlar x-
• Özellik adları küçük harflidir ve ile başlar data-

Örneğin, <x-foo data-bar="gaz"/>veya <br data-bar="gaz"/>.

Elementler için ortak bir sözleşme x-foo; x-vendor-featuretavsiye edilir.

Bu, çoğu durumun üstesinden gelir, çünkü bir geliştiricinin öğelerini kaydetme ile birlikte gelen tüm güce ihtiyaç duyacağı nadiren görülür. Sözdizimi de yeterince geçerli ve kararlıdır. Daha ayrıntılı bir açıklama aşağıdadır.

Gelişmiş Özel Öğeler ve Özellikler

2014 itibariyle, özel öğeleri ve özellikleri kaydetmenin yeni ve çok gelişmiş bir yolu var. IE 9 veya Chrome / Firefox 20 gibi eski tarayıcılarda çalışmaz. Ancak standart HTMLElementarayüzü kullanmanıza, çarpışmaları önlemenize, isimsiz x-*ve isimsiz kullanmanıza ve data-*tarayıcının saygı duyması için özel davranış ve sözdizimi tanımlamanıza olanak tanır. . Aşağıdaki bağlantılarda ayrıntılı olarak açıklandığı gibi biraz süslü JavaScript gerektirir.

HTML5 Rocks - HTML'de Yeni Öğeler Tanımlama
WebComponents.org - Özel Öğelere Giriş
W3C - Web Bileşenleri: Özel Öğeler

Temel Sözdiziminin Geçerliliği Hakkında

data-*Özel özellik adları için kullanmak bir süredir mükemmel bir şekilde geçerliydi ve hatta HTML'nin eski sürümleriyle bile çalışıyor.

W3C - HTML5: Genişletilebilirlik

Özel (kayıtsız) öğe adlarına gelince, W3C bunlara şiddetle tavsiye eder ve uygunsuz olduğunu düşünür. Ancak tarayıcıların bunları desteklemesi gerekir ve x-*tanımlayıcılar gelecekteki HTML özellikleriyle çakışmaz ve x-vendor-featuretanımlayıcılar diğer geliştiricilerle çakışmaz. Herhangi bir seçici tarayıcı etrafında çalışmak için özel bir DTD kullanılabilir.

Resmi dokümanlardan bazı alakalı alıntılar:

"Geçerli spesifikasyonlar yeni belge içeriği tanımlayabilir (örn. Bir foobar öğesi) [...]. Belirli bir uygun HTML5 belgesinin sözdizimi ve anlambilimi, geçerli spesifikasyonların kullanılmasıyla değişmezse, bu belge uygun bir HTML5 olarak kalır belgesi."

"Kullanıcı aracıları anlamadıkları öğeleri ve nitelikleri anlamsal olarak nötr olarak ele almalı; bunları DOM'da (DOM işlemcileri için) bırakmalı ve bunları CSS'ye (CSS işlemcileri için) göre şekillendirmeli, ancak onlardan herhangi bir anlam çıkartamamalı."

"Kullanıcı aracıları uygun olmayan dokümanları istedikleri gibi ele almakta özgür değildir; bu spesifikasyonda açıklanan işleme modeli, girdi belgelerinin uygunluğuna bakılmaksızın uygulamalar için geçerlidir."

"HTMLUnknownElement arabirimi, bu belirtim tarafından tanımlanmayan HTML öğeleri için kullanılmalıdır."

W3C - HTML5: Belgelere Uyumluluk
WhatWG - HTML Standardı: DOM Öğeleri

"Geçerli" kelimesinin, bu bağlamda ya potansiyel olarak geçerli olan iki farklı anlamı olabileceğini belirtmek isterim.

1. Özel etiketli bir HTML belgesi geçerli HTML5 olarak kabul edilmeli mi? Bunun cevabı açıkça "hayır" dır. Spesifikasyon , hangi bağlamlarda hangi etiketlerin geçerli olduğunu tam olarak listeler. Bu nedenle bir HTML doğrulayıcı özel etiketler içeren veya yanlış yerlerde standart etiketler (başlıktaki bir "img" etiketi gibi) olan bir belgeyi kabul etmez.

2. Özel etiketlere sahip bir HTML belgesi, tarayıcılar arasında standart ve açıkça tanımlanmış bir şekilde ayrıştırılır ve oluşturulur mı? Burada, belki de şaşırtıcı bir şekilde, cevap "evet" dir. Belge teknik olarak geçerli HTML5 olarak kabul edilmese de, HTML5 spesifikasyonu , tarayıcıların özel bir etiket gördüklerinde tam olarak ne yapması gerektiğini belirtir : Kısacası, özel etiket bir tür gibi davranır <span>- hiçbir şey ifade etmez ve hiçbir şey yapmaz ancak HTML ile stillendirilebilir ve javascript ile erişilebilir.

Özel HTML öğeleri, ayrıştırıcı ile özel öğeleri bildirmenizi ve kaydetmenizi sağlayan, katkıda bulunduğum, ortaya çıkan bir W3 standardıdır, burada özellikleri okuyabilirsiniz: W3 Web Bileşenleri Özel Öğeler spec . Ayrıca, Microsoft, X-Tag adlı bir kitaplığı (eski Mozilla geliştiricileri tarafından yazılmıştır) destekler - Web Bileşenleri ile çalışmayı daha da kolaylaştırır.

Modern sayfaları yansıtan güncel bir cevap vermek.

Özel etiketler,

1) Bir çizgi içerirler

<my-element>

2) Gömülü XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Bu, HTML5 belgesini kullandığınızı varsayar <!doctype html>

Bu basit kısıtlamalar göz önüne alındığında, HTML işaretlemenizi geçerli tutmak için elinizden gelenin en iyisini yapmak mantıklıdır (lütfen <img>ve<hr> size muhtemelen ihtiyacımız yok bir XHTML Doctype'ı, kullanmadıkça, aptalca ve yanlış).

HTML5'in ayrıştırma kurallarını açıkça tanımladığı göz önüne alındığında, uyumlu bir tarayıcı, kesinlikle geçerli olmasa bile, attığınız herhangi bir etiketi işleyebilecektir.

HTML5 spesifikasyonunun Genişletilebilirlik bölümünden alıntı :

XML serileştirmesi ile sınırlandırılabilen ve HTML serileştirmesinde desteklenmesi gerekmeyen işaretleme düzeyi özellikler için, satıcılar, standart olmayan öğelerin ve özniteliklerin desteklendiği özel ad alanlarını tanımlamak için ad alanı mekanizmasını kullanmalıdır.

HTML5'in XML serileştirmesini kullanıyorsanız, bunun gibi bir şey yapmanız yasaldır:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Ancak, HTML sözdizimini kullanıyorsanız yapabilecekleriniz konusunda çok daha kısıtlı olursunuz.

HTML sözdizimi ile kullanılması amaçlanan işaretleme düzeyi özellikler için, uzantılar "x-vendor-feature" [...] biçiminin yeni nitelikleriyle sınırlandırılmalıdır. [...] Yeni öğe adları oluşturulmamalıdır.

Ancak bu talimatlar öncelikle, oluşturmayı seçtikleri özel öğeler için görsel stil ve işlevsellik sağlayacağı düşünülen tarayıcı satıcılarına yöneliktir.

Bununla birlikte, bir yazar için, sayfaya özel bir öğe (en azından XML serileştirmesine) gömmek yasal olsa da, DOM'daki bir düğümden başka bir şey almayacaksınız. Özel öğenizin gerçekten bir şey yapmasını veya özel bir şekilde oluşturulmasını istiyorsanız, Özel Öğeler spesifikasyonuna bakmanız gerekir .

Konuyla ilgili daha hassas bir astar için , Shadow DOM ve diğer ilgili spesifikasyonlar hakkında bilgi de içeren Web Bileşenleri Girişini okuyun . Bu özellikler şu anda hala taslaklar çalışıyor - mevcut durumu burada görebilirsiniz - ancak aktif olarak geliştiriliyorlar.

Örnek olarak, bir greetingöğe için basit bir tanım şöyle görünebilir:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Bu, tarayıcıya, öğe içeriğini tırnak işaretleri içine almasını ve gri renkle stilize edilmiş "Simon diyor:" metnini önek olarak eklemesini söyler. Genellikle böyle bir özel öğe tanımı, bir bağlantıyla içe aktaracağınız ayrı bir html dosyasında saklanır.

<link rel="import" href="greeting-definition.html" />

İsterseniz satır içi de ekleyebilirsiniz.

Burada görebileceğiniz Polimer çoklu dolgu kütüphanesini kullanarak yukarıdaki tanımın çalışan bir gösterimini oluşturdum . Bunun Polymer kütüphanesinin eski bir sürümünü kullandığını unutmayın - daha yeni sürümler oldukça farklı çalışır. Ancak, spec hala geliştirme ile, bu zaten üretim kodunda kullanmanızı tavsiye ederim bir şey değil.

sadece herhangi bir dom bildirimi olmadan istediğinizi kullanın

<container>content here</container>

kendi stilinizi ekleyin (display: block) ve herhangi bir modern tarayıcı ile çalışacaktır

data-*öznitelikleri HTML5'te ve hatta HTML4'te geçerli olan tüm web tarayıcıları bunlara saygı göstermek için kullanılır. Yeni etiketler eklemek teknik olarak uygundur, ancak yalnızca şu şekilde önerilmemektedir:

1. Gelecekte eklenen bir şeyle çatışabilir ve
2. JavaScript aracılığıyla dinamik olarak eklenmedikçe HTML belgesini geçersiz kılar.

Google bir oyun motoru iframe'de ecample için, umursamıyor sadece yerlerde özel etiketler kullanın ben bir yapılan <log>içeriyordu etiketi <msg>, <error>ve <warning>- ama aracılığıyla JavaScript sadece. Doğrulayıcıya göre tamamen geçerliydi. Hatta stiliyle Internet explorer'da çalışıyor! ]

Özel etiketler HTML5'te geçerli değil. Ancak şu anda tarayıcılar bunları ayrıştırmayı destekliyor ve ayrıca css kullanarak da kullanabilirsiniz. Geçerli tarayıcılar için özel etiketler kullanmak istiyorsanız bunu yapabilirsiniz. Ancak, tarayıcılar kesinlikle HTML içeriğini ayrıştırmak için W3C standartlarını uyguladıktan sonra destek kaldırılabilir.

Bu sorunun eski olduğunu biliyorum, ama bu konuyu inceliyorum ve yukarıdaki ifadelerden bazıları doğru olsa da, özel öğeler oluşturmanın tek yolu onlar değil. Örneğin:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

(Google Chrome, IE, FireFox ve mobil Safari'nin yeni sürümlerinde) gayet iyi çalışır. Tek yapmanız gereken etiketi başlatmak için sadece bir alfa karakteridir (az, AZ) ve daha sonra alfa olmayan karakterlerden herhangi birini kullanabilirsiniz. CSS'deyse, Sorgu \ ^ {...} gibi bir öğeyi bulmak için "\" (ters eğik çizgi) kullanmanız gerekir. Ama JS'de, sadece nasıl gördüğünüzü söylersiniz. Umarım bu yardımcı olur. Buradaki örneğe bakın

-Mink CBOS