(Alıntıdır)
lütfen like atmayı unutmayalım
HTML tanımı DTD biçimindedir. Bu biçimleme genel olarak SGML familyasının dillerini tanımlayabilmek için kullanılmaktadır. Biçim, izin verilmekte olan tüm öğe ve birimler, öznitelikleri ve hiyerarşisi için tanımlamalarını içermektedir. Daha da önceden görebildiğimiz şekilde, HTML DTD bağlamsız bir dilbilgisi oluşturmaz.
DTD'nin birkaç farklı türü ve ayrımı bulunmaktadır. Sıkılaştırılmış kullanım yalnızca spesifikasyonlara uygundur, ancak diğer kullanımlar geçmişte tarayıcılar tarafından kullanılan biçimlendirme için destek içerir. Amaç, eski içerikle geriye dönük uyumluluktur.
Sonuç (Çıktı) ağacı - ayrıştırma ağacı DOM öğesinin ve öznitelik birim ve düğümlemelerinin bir tanım ağacıdır. DOM'un belgeleme için kullanımı kısıtlayıcı
ve kısadır. HTML belgesinin nesneleri ortaya sunumu ve HTML öğelerinin JavaScript gibi dış
dünyaya arayüz kullanımıdır. Ağacın kökü" belge " nesnesidir.
DOM-biçimlendirebilme için bir kullanım ve örnekleme nerdeyse sadece bir tane var. Örneğin;
Kod:
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
Bu nesnelendirme ağacı genel olarak aşağıdaki DOM ağacına çevrilmektedir:
HTML gibi DOM da W3C kuruluşu tarafından belirlenmek ve belirtilmektedir. Belirli bir modül HTML özel birimlemeleri açıklayabilmektedir.
Ağacın DOM düğüm ve bilgilerini içerisinde barındırdığını söylediğim zaman, ağaç DOM arayüzlerinden birini uygulayan öğelerden oluşur. Tarayıcılar, tarayıcı tarafından genel olarak "DAHİLİ" olarak kullanılan diğer özniteliklere sahip somut uygulamaları kullanır.
Başlıca sebepleri şunlardır:
1 - Dilin düzeltici ve kolaylaştırıcı temel yapısı,
2 - Tarayıcıların bilinen geçerli olmayan temel HTML durumlarını desteklemek için geleneksel hata toleransına sahip olması,
+ Benzer farklı diller için kaynaklar ayrıştırma dolayısıyla farklılık göstermez, fakat HTML'deki dinamik kod (belge içeren komut dosyası öğeleri gibi .write()
çağrıları) fazladan jetonlar kullanabilirler, bu sayede ayrıştırma işlemi temelinde girişi tamamen farklılaştırır,
Düzenli ayrıştırma tekniklerini kullanamayan tarayıcılar, HTML'yi ayrıştırmak için özel ayrıştırıcılar oluşturur,Ayrıştırma algoritması HTML5 belirtimi tarafından ayrıntılı olarak açıklanmıştır. Algoritma iki aşamadan oluşur: tokenizasyon
ve ağaç yapımı, Tokenization temel olarak girişi belirteçlere ayrıştırarak sözcüksel analizdir. HTML belirteçleri arasında başlangıç etiketleri, bitiş
etiketleri, öznitelik adları ve öznitelik değerleri bulunur. Tokenizer belirteci tanır, ağaç yapıcısına verir ve sonraki belirteci tanımak
için bir sonraki karakteri tüketir ve böylece girişin sonuna kadar,
Temel bir örnek olarak aşağıdaki HTML tokenizing:
Kod:
<html>
<body>
Hello world
</body>
</html>
Başlangıç durumu "veri durumu"dır. < Karakter karşılaşıldığında, durum "etiketi açık durumu" olarak değiştirilir. Bir A-z karakteri tüketmek, bir "Başlat etiketi belirteci" oluşturulmasına neden olur, durum "Etiket adı durumu" olarak değiştirilir. Karakter tüketilene kadar bu durumda kalırız. Her karakter yeni belirteç adına eklenir. Bizim durumumuzda oluşturulan belirteç bir html belirtecidir. > Etiketine ulaşıldığında, geçerli belirteç yayılır ve durum "veri durumu"na geri döner. < Body > etiketi aynı adımlarla ele alınacaktır. Şimdiye kadar html ve vücut etiketleri yayılmıştır. Şimdi "veri durumu"na geri döndük. Hello world H karakterini tüketmek, bir karakter belirtecinin yaratılmasına ve yayılmasına neden olur, bu < of < / body> ulaşılana kadar devam eder. Merhaba dünyanın her karakteri için bir karakter belirteci yayacağız. Şimdi "Etiket açık durumu" na geri döndük. Bir sonraki girişi tüketmek / bir son etiket belirtecinin oluşturulmasına ve "etiket adı durumuna" taşınmasına neden olur. Ulaş untilana kadar yine bu durumda kal .ıyoruz.Sonra yeni etiket belirteci yayılacak ve "veri durumu"na geri dönüyoruz. < / Html> girişi önceki durum gibi ele alınacaktır.
Örnek girdi için ağaç yapım sürecini görelim:
Kod:
<html>
<body>
Hello world
</body>
</html>
Ağaç yapım aşamasında baaşlangıç, belirteçleme aşamasından bir dizi belirteçtir. İlk mod "ilk mod" dur. "Html" belirtecini almak, "önce html" moduna geçilmesine ve bu modda belirtecin yeniden işlenmesine neden olur. Bu, kök belge nesnesine eklenecek olan HTML
HtmlElement öğesinin oluşturulmasına neden olur.
Durum "before head" olarak değiştirilecek. Daha sonra "vücut" belirteci alınır. Bir "kafa" belirtecimiz olmamasına ve ağaca eklenmesine rağmen, bir HTMLHeadElement örtülü olarak oluşturulacaktır.
Şimdi "ın head" moduna ve ardından "after head" moduna geçiyoruz. Gövde simgesi yeniden işlenir, bir HTMLBodyElement oluşturulur ve eklenir ve mod "vücutta" olarak aktarılır. "Merhaba Dünya" dizesinin karakter belirteçleri şimdi alındı. Birincisi, bir "metin" düğümünün oluşturulmasına ve eklenmesine neden olur ve diğer karakterler bu düğüme eklenir.
Örneğin bu HTML'yi alın:
Kod:
<html>
<mytag>
</mytag>
<div>
<p>
</div>
Really lousy HTML
</p>
</html>
Yaklaşık bir milyon kuralı ihlal etmiş olmalı ("mytag "standart bir etiket değil," P "ve" div " öğelerinin yanlış yuvalanması ve daha fazlası), ancak tarayıcı hala doğru bir şekilde gösteriyor ve şikayet etmiyor. Bu yüzden ayrıştırıcı kodunun çoğu HTML yazar hatalarını düzeltiyor. Hata işleme tarayıcılarda oldukça tutarlıdır, ancak şaşırtıcı derecede HTML spesifikasyonlarının bir parçası olmamıştır. Yer imi ve Geri / İleri düğmeleri gibi, yıllar içinde tarayıcılarda geliştirilen bir şey. Birçok sitede tekrarlanan bilinen geçersiz HTML yapıları vardır ve tarayıcılar bunları diğer tarayıcılarla uyumlu bir şekilde düzeltmeye çalışırlar. HTML5 belirtimi bu gereksinimlerin bazılarını tanımlar. (WebKit, HTML ayrıştırıcı sınıfının başındaki yorumda bunu güzel bir şekilde özetlemektedir .)
Bazı WebKit hata toleransı örneklerini görelim:
bunun yerine <br></br>
Bazı siteler <br> yerine </br>kullanır. IE ve Firefox ile uyumlu olması için, WebKit bu gibi davranır.
Kod:
eğer (t - > isCloseTag (brTag) & & m_docum*nt - > inCompatMode()) {
reporderror (MalformedBRError);
t - > beginTag = true;
}Hata işlemenin dahili olduğunu unutmayın: kullanıcıya sunulmayacaktır.
Başı tablebo tableş bir masa
Bir başıboş tablo, başka bir tablonun içindeki bir tablodur, ancak bir tablo hücresinin içinde değildir.
Mesela:
Kod:
<Tablo>
<Tablo>
<tr> < td>iç tablo< / td > < / tr>
</Tablo>
<tr> < td>dış tablo< / td > < / tr>
< / table>WebKit hiyerarşiyi iki kardeş tabloya değiştirir:
<Tablo>
<tr> < td>dış tablo< / td > < / tr>
</Tablo>
<Tablo>
<tr> < td>iç tablo< / td > < / tr>
< / table > kodu:
if (m_inStrayTableContent & & localName = = tableTag)
popBlock (tableTag);WebKit geçerli öğe içeriği için bir yığın kullanır: iç tabloyu dış tablo yığınından çıkarır. Tablolar artık kardeş olacak.
İç içe geçmiş form öğeleri
Kullanıcı başka bir form içinde bir form koyar, ikinci form yoksayılır.
Kod:
if (!m_currentFormElement) {
M_currentformelement = yeni HTMLFormElement (formTag, m_docum*nt);
}
bool HTMLParser:: allowNestedRedundantTag (const AtomicString & tagName)
{
imzasız i = 0;
için (HTMLStackElem * curr = m_blockStack;
ben < cMaxRedundantTagDepth & & curr & & curr - > tagName = = tagName;
curr = curr - > sonraki, i++) { }
dönüş ben != cMaxRedundantTagDepth;
}
+ Yanlış yerleştirilmiş html veya gövde sonu etiketleri-/
Gerçekten kırık HTML desteği. Bazı aptal web sayfaları dokümanın gerçek sonundan önce kapattığından, vücut etiketini asla kapatmayız. İşleri kapatmak için end () çağrısına güvenelim. eğer (t - > tagName == htmlTag / / t - > tagName = = bodyTag )
Bu yüzden web yazarları dikkat edin-Bir WebKit hata tolerans kod parçacığında örnek olarak görünmek istemiyorsanız - iyi oluşturulmuş HTML yazın.
CSS Ayrıştırma
Girişteki ayrıştırma kavramlarını hatırlıyor musunuz? Peki, HTML'DEN farklı olarak, CSS bağlamsız bir dilbilgisidir ve girişte açıklanan ayrıştırıcı türleri kullanılarak ayrıştırılabilir. Aslında CSS belirtimi CSS sözcük ve sözdizimi dilbilgisini tanımlar.
Bazı örnekler görelim:
Sözcük dilbilgisi (kelime bilgisi), her belirteç için düzenli ifadelerle tanımlanır:
Kod:
\/\*[^*]*\*+([^/*][^*]*\*+)*\/
num [0-9]+|[0-9]*"."[0-9]+
nonascii [\200 - \377]
nmstart [_a-z| / {nonascii} / {kaçış}
nmchar [_a-z0-9 -] / {nonascii} / {kaçış}
isim {nmchar}+
ident {nmstart}{nmchar}*
"ıdent", bir sınıf adı gibi tanımlayıcı için kısadır. "ad" bir öğe kimliğidir (bu, "#" )
Sözdizimi dilbilgisi bnf açıklanmıştır.
Kod:
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
selector
: simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
;
simple_selector
: element_name [ HASH | class | attrib | pseudo ]*
| [ HASH | class | attrib | pseudo ]+
;
class
: '.' IDENT
;
element_name
: IDENT | '*'
;
attrib
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ] ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
;
Açıklama: Bu bir kural kümesi yapısıdır.
Kod:
div.error, a.error {
color:red;
font-weight:bold;
}
Bu, bir kural kümesinin bir seçici veya isteğe bağlı olarak virgül ve boşluklarla ayrılmış bir dizi seçici olduğu anlamına gelir (beyaz boşluk anlamına gelir). Kural kümesi, kıvırcık parantezleri ve içlerinde bir bildirim veya isteğe bağlı olarak noktalı virgülle ayrılmış bir dizi bildirim içerir. "bildirim" ve "seçici" aşağıdaki bnf tanımlarında tanımlanacaktır.
WebKit CSS ayrıştırıcı
WebKit, CSS dilbilgisi dosyalarından otomatik olarak ayrıştırıcılar oluşturmak için Flex ve Bison ayrıştırıcı jeneratörlerini kullanır. Ayrıştırıcı girişinden hatırladığınız gibi, Bison aşağıdan yukarıya kaydırmalı ayrıştırıcı oluşturur. Firefox elle yazılmış bir yukarıdan aşağıya ayrıştırıcı kullanır. Her iki durumda da her CSS dosyası bir stil sayfası nesnesine ayrıştırılır. Her nesne CSS kuralları içerir. CSS kural nesneleri, seçici ve bildirim nesnelerini ve CSS dilbilgisine karşılık gelen diğer nesneleri içerir.
Komut Belgelerinin ve Style (Stil) Dökümanlarının İşlenme Sırası
Scripts ( Komutlar )Düzenleyiciler ayrıştırıcı temeline ulaşabildiğinde bu komut dosyalarının ayrıştırılmasının tamamlanmasını ve aynı zamanda çalıştırılmasını umarlar. Fakat komut dosyaları çalıştırılmadan önce belgenin ayrıştırılması durur. Belirli komut dosyaları harici olması durumunda kaynaklar ağdan getirilir. Bu yapılana kadar ayrıştırılma eş zamanlı çalışmadan dolayı durur. Kullanıcılar "defer" özelliğini herhangi bir komut dosyasına eklentileyebilir, bu durumda belge ayrıştırmayı durdurmaz ve belge ayrıştırıldıktan sonra yürütülür.
Not: Spekülatif ayrıştırıcı sadece harici komut dosyaları, style (stil) sayfaları ve görüntüler benzeri harici kaynaklara dair yapılmakta olan istekleri ayrıştırmaktadır: DOM ağacını değiştirmez, bu ana ayrıştırıcıya bırakılır.
Kod:
class RenderObject{
virtual **** layout();
virtual **** paint(PaintInfo);
virtual **** rect repaintRect();
Node* node; //the DOM node
RenderStyle* style; // the computed style
RenderLayer* containgLayer; //the containing z-index layer
}
Her oluşturucu, genellikle css2 spesifikasyonu tarafından açıklandığı gibi bir düğümün CSS kutusuna karşılık gelen dikdörtgen bir alanı temsil eder. Genişlik, yükseklik ve konum gibi geometrik bilgileri içerir.
Kutu türü, düğümle ilgili olan stil özniteliğinin "görüntüleme" değerinden etkilenir(stil hesaplama bölümüne bakın). Display özniteliğine göre, bir DOM düğümü için ne tür bir işleyicinin oluşturulması gerektiğine karar vermek için WebKit kodu:
Kod:
RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
********* doc = node->********();
RenderArena* arena = doc->renderArena();
...
RenderObject* o = 0;
switch (style->display()) {
case NONE:
break;
case INLINE:
o = new (arena) RenderInline(node);
break;
case BLOCK:
o = new (arena) RenderBlock(node);
break;
case INLINE_BLOCK:
o = new (arena) RenderBlock(node);
break;
case LIST_ITEM:
o = new (arena) RenderListItem(node);
break;
...
}
return o;
}
Öğe türü de dikkate alınır: örneğin, form kontrolleri ve tablolar özel çerçevelere sahiptir.
Webkit'te bir öğe özel bir işleyici oluşturmak istiyorsa, createRenderer() yöntemini geçersiz kılar. Oluşturucular, geometrik olmayan bilgiler içeren stil nesnelerine işaret eder.
lütfen like atmayı unutmayalım
View hidden content is available for registered users!
HTML DTD
View hidden content is available for registered users!
HTML tanımı DTD biçimindedir. Bu biçimleme genel olarak SGML familyasının dillerini tanımlayabilmek için kullanılmaktadır. Biçim, izin verilmekte olan tüm öğe ve birimler, öznitelikleri ve hiyerarşisi için tanımlamalarını içermektedir. Daha da önceden görebildiğimiz şekilde, HTML DTD bağlamsız bir dilbilgisi oluşturmaz.
DTD'nin birkaç farklı türü ve ayrımı bulunmaktadır. Sıkılaştırılmış kullanım yalnızca spesifikasyonlara uygundur, ancak diğer kullanımlar geçmişte tarayıcılar tarafından kullanılan biçimlendirme için destek içerir. Amaç, eski içerikle geriye dönük uyumluluktur.
DOM
Sonuç (Çıktı) ağacı - ayrıştırma ağacı DOM öğesinin ve öznitelik birim ve düğümlemelerinin bir tanım ağacıdır. DOM'un belgeleme için kullanımı kısıtlayıcı
ve kısadır. HTML belgesinin nesneleri ortaya sunumu ve HTML öğelerinin JavaScript gibi dış
dünyaya arayüz kullanımıdır. Ağacın kökü" belge " nesnesidir.
DOM-biçimlendirebilme için bir kullanım ve örnekleme nerdeyse sadece bir tane var. Örneğin;
Kod:
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
Bu nesnelendirme ağacı genel olarak aşağıdaki DOM ağacına çevrilmektedir:
HTML gibi DOM da W3C kuruluşu tarafından belirlenmek ve belirtilmektedir. Belirli bir modül HTML özel birimlemeleri açıklayabilmektedir.
Ağacın DOM düğüm ve bilgilerini içerisinde barındırdığını söylediğim zaman, ağaç DOM arayüzlerinden birini uygulayan öğelerden oluşur. Tarayıcılar, tarayıcı tarafından genel olarak "DAHİLİ" olarak kullanılan diğer özniteliklere sahip somut uygulamaları kullanır.
Ayrıştırma Algoritması
Daha önceki başlıklarda görebildiğimiz şekilde, HTML kullanım olarak yukarıdan aşağıya ya da aşağıdan yukarıya ayrıştırıcılar sayesinde ayrıştırılamaz.Başlıca sebepleri şunlardır:
1 - Dilin düzeltici ve kolaylaştırıcı temel yapısı,
2 - Tarayıcıların bilinen geçerli olmayan temel HTML durumlarını desteklemek için geleneksel hata toleransına sahip olması,
+ Benzer farklı diller için kaynaklar ayrıştırma dolayısıyla farklılık göstermez, fakat HTML'deki dinamik kod (belge içeren komut dosyası öğeleri gibi .write()
çağrıları) fazladan jetonlar kullanabilirler, bu sayede ayrıştırma işlemi temelinde girişi tamamen farklılaştırır,
Düzenli ayrıştırma tekniklerini kullanamayan tarayıcılar, HTML'yi ayrıştırmak için özel ayrıştırıcılar oluşturur,Ayrıştırma algoritması HTML5 belirtimi tarafından ayrıntılı olarak açıklanmıştır. Algoritma iki aşamadan oluşur: tokenizasyon
ve ağaç yapımı, Tokenization temel olarak girişi belirteçlere ayrıştırarak sözcüksel analizdir. HTML belirteçleri arasında başlangıç etiketleri, bitiş
etiketleri, öznitelik adları ve öznitelik değerleri bulunur. Tokenizer belirteci tanır, ağaç yapıcısına verir ve sonraki belirteci tanımak
için bir sonraki karakteri tüketir ve böylece girişin sonuna kadar,
Tokinizasyon Algoritması
Algoritmanın genel son çıktısı bir HTML belirteci olabilir. Algoritmalar temel olarak bir durum makinesi olarak ifade edilmektedir. Her durum giriş akışının bir veya daha fazla karakterini tüketir ve bu karakterlere göre bir sonraki durumu günceller. Karar, mevcut tokenizasyon durumundan ve ağaç yapım durumundan etkilenir. Bu, aynı tüketilen karakterin geçerli duruma bağlı olarak doğru bir sonraki durum için farklı sonuçlar vereceği anlamına gelir. Algoritma tam olarak tanımlamak için çok karmaşıktır, bu yüzden prensibi anlamamıza yardımcı olacak basit bir örnek görelim.Temel bir örnek olarak aşağıdaki HTML tokenizing:
Kod:
<html>
<body>
Hello world
</body>
</html>
Başlangıç durumu "veri durumu"dır. < Karakter karşılaşıldığında, durum "etiketi açık durumu" olarak değiştirilir. Bir A-z karakteri tüketmek, bir "Başlat etiketi belirteci" oluşturulmasına neden olur, durum "Etiket adı durumu" olarak değiştirilir. Karakter tüketilene kadar bu durumda kalırız. Her karakter yeni belirteç adına eklenir. Bizim durumumuzda oluşturulan belirteç bir html belirtecidir. > Etiketine ulaşıldığında, geçerli belirteç yayılır ve durum "veri durumu"na geri döner. < Body > etiketi aynı adımlarla ele alınacaktır. Şimdiye kadar html ve vücut etiketleri yayılmıştır. Şimdi "veri durumu"na geri döndük. Hello world H karakterini tüketmek, bir karakter belirtecinin yaratılmasına ve yayılmasına neden olur, bu < of < / body> ulaşılana kadar devam eder. Merhaba dünyanın her karakteri için bir karakter belirteci yayacağız. Şimdi "Etiket açık durumu" na geri döndük. Bir sonraki girişi tüketmek / bir son etiket belirtecinin oluşturulmasına ve "etiket adı durumuna" taşınmasına neden olur. Ulaş untilana kadar yine bu durumda kal .ıyoruz.Sonra yeni etiket belirteci yayılacak ve "veri durumu"na geri dönüyoruz. < / Html> girişi önceki durum gibi ele alınacaktır.
Ağaç Yapımı Algoritması
Ayrıştırıcı oluşturulduğunda, belge nesnesi oluşturulur. Ağaç yapım aşamasında, kökünde belge bulunan DOM ağacı değiştirilecek ve ona elemanlar eklenecektir. Tokenizer tarafından yayılan her düğüm ağaç yapıcısı tarafından işlenecektir. Her belirteç için belirtim, hangi DOM öğesinin onunla alakalı olduğunu tanımlar ve Bu belirteç için oluşturulur. Öğe DOM ağacına ve ayrıca açık öğelerin yığınına eklenir. Bu yığın, yuvalama uyumsuzluklarını ve kapatılmamış etiketleri düzeltmek için kullanılır. Algoritma ayrıca bir durum makinesi olarak tanımlanır. Durumlara "ekleme modları" denir.Örnek girdi için ağaç yapım sürecini görelim:
Kod:
<html>
<body>
Hello world
</body>
</html>
Ağaç yapım aşamasında baaşlangıç, belirteçleme aşamasından bir dizi belirteçtir. İlk mod "ilk mod" dur. "Html" belirtecini almak, "önce html" moduna geçilmesine ve bu modda belirtecin yeniden işlenmesine neden olur. Bu, kök belge nesnesine eklenecek olan HTML
HtmlElement öğesinin oluşturulmasına neden olur.
Durum "before head" olarak değiştirilecek. Daha sonra "vücut" belirteci alınır. Bir "kafa" belirtecimiz olmamasına ve ağaca eklenmesine rağmen, bir HTMLHeadElement örtülü olarak oluşturulacaktır.
Şimdi "ın head" moduna ve ardından "after head" moduna geçiyoruz. Gövde simgesi yeniden işlenir, bir HTMLBodyElement oluşturulur ve eklenir ve mod "vücutta" olarak aktarılır. "Merhaba Dünya" dizesinin karakter belirteçleri şimdi alındı. Birincisi, bir "metin" düğümünün oluşturulmasına ve eklenmesine neden olur ve diğer karakterler bu düğüme eklenir.
Ayrıştırma Tamamlandığında Yapılması Gereken İşlemler
Bu aşamada tarayıcı belgeyi etkileşimli olarak işaretler ve "ertelenmiş" modda olan komut dosyalarını ayrıştırmaya başlar: belge ayrıştırıldıktan sonra çalıştırılması gerekenler. Belge durumu daha sonra "tamamlandı" olarak ayarlanır ve bir "yük" olayı harekete geçirilir. HTML5 belirtiminde tokenizasyon ve ağaç yapımı için tam algoritmaları görebilirsinizTarayıcıların hata toleransı
Bir HTML sayfasında hiçbir zaman "geçersiz sözdizimi" hatası almazsınız. Tarayıcılar geçersiz içeriği düzeltir ve devam eder.Örneğin bu HTML'yi alın:
Kod:
<html>
<mytag>
</mytag>
<div>
<p>
</div>
Really lousy HTML
</p>
</html>
Yaklaşık bir milyon kuralı ihlal etmiş olmalı ("mytag "standart bir etiket değil," P "ve" div " öğelerinin yanlış yuvalanması ve daha fazlası), ancak tarayıcı hala doğru bir şekilde gösteriyor ve şikayet etmiyor. Bu yüzden ayrıştırıcı kodunun çoğu HTML yazar hatalarını düzeltiyor. Hata işleme tarayıcılarda oldukça tutarlıdır, ancak şaşırtıcı derecede HTML spesifikasyonlarının bir parçası olmamıştır. Yer imi ve Geri / İleri düğmeleri gibi, yıllar içinde tarayıcılarda geliştirilen bir şey. Birçok sitede tekrarlanan bilinen geçersiz HTML yapıları vardır ve tarayıcılar bunları diğer tarayıcılarla uyumlu bir şekilde düzeltmeye çalışırlar. HTML5 belirtimi bu gereksinimlerin bazılarını tanımlar. (WebKit, HTML ayrıştırıcı sınıfının başındaki yorumda bunu güzel bir şekilde özetlemektedir .)
Bazı WebKit hata toleransı örneklerini görelim:
bunun yerine <br></br>
Bazı siteler <br> yerine </br>kullanır. IE ve Firefox ile uyumlu olması için, WebKit bu gibi davranır.
Kod:
eğer (t - > isCloseTag (brTag) & & m_docum*nt - > inCompatMode()) {
reporderror (MalformedBRError);
t - > beginTag = true;
}Hata işlemenin dahili olduğunu unutmayın: kullanıcıya sunulmayacaktır.
Başı tablebo tableş bir masa
Bir başıboş tablo, başka bir tablonun içindeki bir tablodur, ancak bir tablo hücresinin içinde değildir.
Mesela:
Kod:
<Tablo>
<Tablo>
<tr> < td>iç tablo< / td > < / tr>
</Tablo>
<tr> < td>dış tablo< / td > < / tr>
< / table>WebKit hiyerarşiyi iki kardeş tabloya değiştirir:
<Tablo>
<tr> < td>dış tablo< / td > < / tr>
</Tablo>
<Tablo>
<tr> < td>iç tablo< / td > < / tr>
< / table > kodu:
if (m_inStrayTableContent & & localName = = tableTag)
popBlock (tableTag);WebKit geçerli öğe içeriği için bir yığın kullanır: iç tabloyu dış tablo yığınından çıkarır. Tablolar artık kardeş olacak.
İç içe geçmiş form öğeleri
Kullanıcı başka bir form içinde bir form koyar, ikinci form yoksayılır.
Kod:
if (!m_currentFormElement) {
M_currentformelement = yeni HTMLFormElement (formTag, m_docum*nt);
}
bool HTMLParser:: allowNestedRedundantTag (const AtomicString & tagName)
{
imzasız i = 0;
için (HTMLStackElem * curr = m_blockStack;
ben < cMaxRedundantTagDepth & & curr & & curr - > tagName = = tagName;
curr = curr - > sonraki, i++) { }
dönüş ben != cMaxRedundantTagDepth;
}
+ Yanlış yerleştirilmiş html veya gövde sonu etiketleri-/
Gerçekten kırık HTML desteği. Bazı aptal web sayfaları dokümanın gerçek sonundan önce kapattığından, vücut etiketini asla kapatmayız. İşleri kapatmak için end () çağrısına güvenelim. eğer (t - > tagName == htmlTag / / t - > tagName = = bodyTag )
Bu yüzden web yazarları dikkat edin-Bir WebKit hata tolerans kod parçacığında örnek olarak görünmek istemiyorsanız - iyi oluşturulmuş HTML yazın.
CSS Ayrıştırma
Girişteki ayrıştırma kavramlarını hatırlıyor musunuz? Peki, HTML'DEN farklı olarak, CSS bağlamsız bir dilbilgisidir ve girişte açıklanan ayrıştırıcı türleri kullanılarak ayrıştırılabilir. Aslında CSS belirtimi CSS sözcük ve sözdizimi dilbilgisini tanımlar.
Bazı örnekler görelim:
Sözcük dilbilgisi (kelime bilgisi), her belirteç için düzenli ifadelerle tanımlanır:
Kod:
\/\*[^*]*\*+([^/*][^*]*\*+)*\/
num [0-9]+|[0-9]*"."[0-9]+
nonascii [\200 - \377]
nmstart [_a-z| / {nonascii} / {kaçış}
nmchar [_a-z0-9 -] / {nonascii} / {kaçış}
isim {nmchar}+
ident {nmstart}{nmchar}*
"ıdent", bir sınıf adı gibi tanımlayıcı için kısadır. "ad" bir öğe kimliğidir (bu, "#" )
Sözdizimi dilbilgisi bnf açıklanmıştır.
Kod:
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
selector
: simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
;
simple_selector
: element_name [ HASH | class | attrib | pseudo ]*
| [ HASH | class | attrib | pseudo ]+
;
class
: '.' IDENT
;
element_name
: IDENT | '*'
;
attrib
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ] ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
;
Açıklama: Bu bir kural kümesi yapısıdır.
Kod:
div.error, a.error {
color:red;
font-weight:bold;
}
Bu, bir kural kümesinin bir seçici veya isteğe bağlı olarak virgül ve boşluklarla ayrılmış bir dizi seçici olduğu anlamına gelir (beyaz boşluk anlamına gelir). Kural kümesi, kıvırcık parantezleri ve içlerinde bir bildirim veya isteğe bağlı olarak noktalı virgülle ayrılmış bir dizi bildirim içerir. "bildirim" ve "seçici" aşağıdaki bnf tanımlarında tanımlanacaktır.
WebKit CSS ayrıştırıcı
WebKit, CSS dilbilgisi dosyalarından otomatik olarak ayrıştırıcılar oluşturmak için Flex ve Bison ayrıştırıcı jeneratörlerini kullanır. Ayrıştırıcı girişinden hatırladığınız gibi, Bison aşağıdan yukarıya kaydırmalı ayrıştırıcı oluşturur. Firefox elle yazılmış bir yukarıdan aşağıya ayrıştırıcı kullanır. Her iki durumda da her CSS dosyası bir stil sayfası nesnesine ayrıştırılır. Her nesne CSS kuralları içerir. CSS kural nesneleri, seçici ve bildirim nesnelerini ve CSS dilbilgisine karşılık gelen diğer nesneleri içerir.
Komut Belgelerinin ve Style (Stil) Dökümanlarının İşlenme Sırası
Scripts ( Komutlar )
Spekülatif Ayrıştırma
Bu kullanımı hem webkit hemde aynı zamanda firefox gerçekleştirir. Komut dosyaları yürütülmeye başladığında başka herhangi bir iş birimide geriye kalan kaynakların ayrıştırılmasını tamamlar. Bunun sayesinde kaynaklar genellikle paralel bağlantılara eklenebilir ve hızları da bu sayede iyileşir.Not: Spekülatif ayrıştırıcı sadece harici komut dosyaları, style (stil) sayfaları ve görüntüler benzeri harici kaynaklara dair yapılmakta olan istekleri ayrıştırmaktadır: DOM ağacını değiştirmez, bu ana ayrıştırıcıya bırakılır.
Style (Stil) Sayfaları
Bunların dışında stil sayfalarının yapısı diğerlerinden farklıdır. Terim olarak, stil sayfaları DOM ağaçları üzerinde değiştirme veya ayrıştırma işlemleri yapması için bir neden yoktur. Eğer bu aşamada stil hala sisteme yüklenmediyse hatalar alınacaktır. Kısacası komut dosyasında yanlışlıklar meydana gelecektir. Firefox işleyen bir stil sayfası görürse bu durumda komut dosyalarının çalışmasını engeller. WebKit, yalnızca kaldırılmış stil sayfalarından etkilenebilecek belirli stil özelliklerine erişmeye çalıştıklarında komut dosyalarını engeller.Ağaç Yapımında Render
DOM Ağacının oluşturulması sırasında tarayıcı farklı bir ağa daha "render ağacını" oluşturmaktadır. Bu ağaç temelde görüntü ve görüntülenebilecek içeriklerin görüntülenmesinden sorumludur. Bu ağacın asıl amacı görsel nitelikleri renklendirmektir. Firefox genel olarak render ağacında bulunan birimleri "çerçeve" olarak adlandırmaktadır. Ayrıca webkit render nesnesini kullanmaktadır. Herhangi bir oluşturucu neler yapacağını, görevlerini yani renklendirmelerini bilmektedir. Webkit'in RenderObject sınıfı, oluşturucuların temel sınıfı aşağıdaki tanıma sahiptir:Kod:
class RenderObject{
virtual **** layout();
virtual **** paint(PaintInfo);
virtual **** rect repaintRect();
Node* node; //the DOM node
RenderStyle* style; // the computed style
RenderLayer* containgLayer; //the containing z-index layer
}
Her oluşturucu, genellikle css2 spesifikasyonu tarafından açıklandığı gibi bir düğümün CSS kutusuna karşılık gelen dikdörtgen bir alanı temsil eder. Genişlik, yükseklik ve konum gibi geometrik bilgileri içerir.
Kutu türü, düğümle ilgili olan stil özniteliğinin "görüntüleme" değerinden etkilenir(stil hesaplama bölümüne bakın). Display özniteliğine göre, bir DOM düğümü için ne tür bir işleyicinin oluşturulması gerektiğine karar vermek için WebKit kodu:
Kod:
RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
********* doc = node->********();
RenderArena* arena = doc->renderArena();
...
RenderObject* o = 0;
switch (style->display()) {
case NONE:
break;
case INLINE:
o = new (arena) RenderInline(node);
break;
case BLOCK:
o = new (arena) RenderBlock(node);
break;
case INLINE_BLOCK:
o = new (arena) RenderBlock(node);
break;
case LIST_ITEM:
o = new (arena) RenderListItem(node);
break;
...
}
return o;
}
Öğe türü de dikkate alınır: örneğin, form kontrolleri ve tablolar özel çerçevelere sahiptir.
Webkit'te bir öğe özel bir işleyici oluşturmak istiyorsa, createRenderer() yöntemini geçersiz kılar. Oluşturucular, geometrik olmayan bilgiler içeren stil nesnelerine işaret eder.
DOM Ağacı ve Render Ağacının Temel İlişkisi
İşleyiciler DOM birimlerine denk gelmektedir. Fakat ilişki olarak bire bir değildirler. DOM birimleri görsel olmadığından render birimlerine eklenemez. Aynı zamanda görüntülenme değerlendirmeleri "none" olan birimler ağaçda herhangi bir işlem göstermez veya işleme karşılık gelmez. Fakat bazı görsel nesnelere karşılık gelen DOM birimleri de bulunmaktadır. Genelde bu birimler dikdörtgenler tarafından belirlenemeyen karmaşık ögelerden oluşmaktadır. Örnek verecek olursak "seç" biriminin üç adet renderi bulunmaktadır. Bir tanesi görüntüleme, bir tanesi açılabilir listeleme kutusu, bir tanesi ise düğme içindir. Birden çok işleyicinin bir başka örneği de html'dir. CSS spesifikasyonuna göre bir satır içi öğe yalnızca blok öğeleri veya yalnızca satır içi öğeler içermelidir. Karışık içerik durumunda, satır içi öğeleri sarmak için anonim blok oluşturucular oluşturulacaktır.Bazı render nesneleri bir DOM düğümüne karşılık gelir, ancak ağaçta aynı yerde değildir. Şamandıralar ve kesinlikle konumlandırılmış elemanlar akış dışındadır, ağacın farklı bir bölümüne yerleştirilir ve gerçek çerçeveye eşlenir. Olması gereken yer tutucu çerçevedir.
