CSS Doğrulama Hizmeti ile CSS doğrulama. W3C doğrulayıcı Backlink analizi ile html ve css'yi düzeltme

2016-12-29


Düğmeleri canlandırıyoruz ve siteyi HTML ve CSS kodunun geçerliliği için kontrol ediyoruz

Merhaba sevgili ziyaretçi!

Bugün, oluşturulmuş bir web sayfası örneğini kullanarak, sitenin geçerliliğini, yani HTML ve CSS dillerinin yerleşik özelliklerine uygunluğu nasıl kontrol edebileceğinize bakacağız.

Ek olarak, kontrol etmeden önce, kenar çubuğu düğmelerinin "animasyonu" ile ilgili olarak CSS stil sayfasında biraz iyileştirme yapacağız, burada durumlarına bağlı olarak görünümlerini değiştiren statik düğmelerden - pasif, aktif ve basılı - etkileşimli düğmeler yapacağız.

  • Düğmeleri hacimli yapmak
  • Düğmeleri etkileşimli hale getirme
  • Doğrulama gerekli mi?
  • HTML kodu nasıl doğrulanır
  • CSS kodu nasıl doğrulanır
  • Site kaynak dosyaları

Düğmeleri hacimli yapmak

Bir önceki yazımızda ana içerik alanını ana sayfa düzenine uyacak şekilde tasarlamıştık. Aynı zamanda, şu anda kenar çubuğunda statik olan ve köşeleri yuvarlatılmış normal düz kahverengi bir dikdörtgene benzeyen düğmeler var.

Aşağıda, bu tür düğmelere sahip bir kenar çubuğunun bir parçası bulunmaktadır.

Düğmeleri "canlandırmak" için, önce CSS stillerini kullanarak onlara biraz hacim veriyoruz. Bunu da rotator, arama ve abonelik bloklarının tasarımında zaten kullanılmış olan lineer gradyan özelliğini kullanarak yapacağız.

Doğrusal gradyanın değerlerini aşağıdaki gibi tanımlarız:

1. Renk tonları, düğmenin ana rengine kıyasla daha koyu bir renkle başlayarak aşağıdan yukarıya doğru ayarlanacaktır. Degradenin başında hangi rengin kullanılacağını belirlemek için, bu durumda Photoshop olan bir grafik düzenleyici aracı kullanıyoruz.

Bunu yapmak için, tasarım düzeni belgesi açıkken, "Renk Seçici" yi seçmeniz, düğmenin gerekli alanının üzerine gelmeniz, ana rengi belirlemeniz ve ardından daha koyu bir renk seçmek için "Renk Seçici" araçlarını kullanmanız gerekir. aynı kahverengi tonda. Bizim durumumuzda "653939" değerindeki rengi alalım. Açıkçası, bunun nasıl yapılabileceği aşağıdaki ekran görüntüsünde gösterilmektedir.


2. Ardından, ilk koyu rengin ana renge gireceği degradenin durma konumunu tanımlayın. Durdurma konumu yaklaşık olarak ortaya yerleştirilecektir. Aynı zamanda rengi daha doygun hale getirmek için durma konumunu biraz yukarı kaydıralım ve değerini, diyelim ki yüksekliğin %70'ini tanımlayalım.

3. Ve degradenin özelliklerini ayarlamak için yapılacak son şey, üstteki düğmeleri renklendirecek olan ana renge kıyasla daha açık bir renk tanımlamaktır. Bu, degradenin ilk rengini belirlerken olduğu gibi yapılır. Bu durumda bu rengin değeri "b88686" olarak alınacaktır.

3. Alınan verilere dayanarak, düğmelerin önceden oluşturulmuş CSS özelliklerine doğrusal bir gradyan ekleyeceğiz.

    giriş: {

    yükseklik :30 piksel;

    kenar boşluğu-alt :10 piksel;

    sınır yarıçapı :5 piksel;

    arka fon :#a76d6d;

    Metin hizalama :merkez;

    yazı tipi ağırlığı :gözü pek;

    renk :#fff;

    batmadan yüzmek :Sağ;

    arka plan görüntüsü

Ekstrem renkler belirlenirken %0 ve %100 değerleri ile bunu yapmak gerekli olmadığı için burada durma konumlarının belirtilmediği belirtilebilir.

Şimdi tarayıcımızı yenileyelim ve sonuca bakalım.

Gördüğünüz gibi, düğmeler hafif bir şişkinlik kazandı. Şimdi onları "canlandırmaya" başlayabilirsiniz.

Düğmeleri etkileşimli hale getirme

Butonlarla tam olarak çalışabilmeleri için onları interaktif hale getireceğiz, bu üç ana durumu görsel olarak yansıtacak, pasif (düğme ilk durumunda), aktif (imleç düğmenin üzerinde gezdirilir) ve basılı (fare) imleç gezinirken düğmesine basılır).

Ve bunu gölge ve kenarlık özelliklerinin bir kombinasyonunu kullanarak yapacağız. Bu tekniğin özü, farklı kenarlardan gölge ve kenarlıkların rengini değiştirerek, düğmelerin durumundaki bir değişikliğin taklidini elde edebilmenizdir.

Öncelikle bunu pasif durum için yapalım ve düğme yüzeyin üzerine çıkacak şekilde çizmeye çalışalım.

Kenarların ve gölgelerin renklerini önceki durumlarda olduğu gibi seçiyoruz.

CSS koduna uygun eklemeler yapıldıktan sonra formu alacaktır.

    giriş: {

    yükseklik :30 piksel;

    kenar boşluğu-alt :10 piksel;

    sınır yarıçapı :5 piksel;

    arka fon :#a76d6d;

    Metin hizalama :merkez;

    yazı tipi ağırlığı :gözü pek;

    renk :#fff;

    batmadan yüzmek :Sağ;

    arka plan görüntüsü :doğrusal-gradyan(üste, #653939, #a76d6d %50, #b88686);

    kutu gölgesi :2px 2px 4px 0px #422a2a;

    sınır genişliği :2 piksel;

    sınır stili :sağlam;

    sınır rengi :#ddbebe #241616 #241616 #ddbebe;

Burada sınırların, kalınlığı belirleyen özelliklerin bir kombinasyonu ile temsil edildiğini fark edebilirsiniz (değer ile sınır-genişlik). 2 piksel), dört kenarın her birinde düz bir kenarlık ve renkler ( border-color ) belirten bir değere sahip bir stil ( border-style ).

Şimdi tarayıcıyı yenileyelim ve butonların şimdi nasıl görüneceğini görelim.

Gördüğünüz gibi, bu durumdaki düğmeler yükselmiş gibi görünüyor.

Şimdi düğmelere basılı bir durum görünümü vermeye çalışalım. Bunu yapmak için gölgeyi kaldırın ve kenarlıkların rengini değiştirin. Bu durumda, aktif duruma karşılık gelen özel bir sözde sınıf seçicisi :hover kullanacağız.

Butonların aktif durumu için CSS kodu aşağıdaki formu alacaktır.

    giriş: üzerine gelmek {

    kutu gölgesi :Yok;

    sınır rengi :#a76d6d #a76d6d #a76d6d #a76d6d;

Bu durumda bordürlerin rengini tekrar değiştirip bir gölge ekleyeceğiz, sadece bu durumda iç olacak ve yer değiştirme olmayacak. Sözde sınıf seçici de, basılan duruma karşılık gelen :active olarak değişecektir.

Basılan durum için CSS kodu aşağıdaki gibi olacaktır.

    giriş: aktif {

    kutu gölgesi :0px 0px 7px 2px #422a2a iç metin;

    sınır rengi :#777 #fff #fff #777;

"Ara" düğmesi, duruma bağlı olarak görünümünü nasıl değiştirdiğini açıkça görebileceğiniz karşılaştırma için aşağıda gösterilmiştir.


Şekil.8 Pasif durum

Burası ana sayfanın düzenini bitirdiğimiz ve tasarım düzenine uygun bir görünüme getirdiğimiz yer. Ve şimdi, daha önce her aşamada olduğu gibi, farklı tarayıcılarda çapraz uygunluk için kontrol etmeliyiz. Ancak bundan önce, kodun durumu da çapraz tutarlılığı bir dereceye kadar etkileyebileceğinden, doğrulama için sayfayı kontrol edelim. Bu nedenle, şimdi bu çok gerekli işlemi gerçekleştireceğiz.

Doğrulama gerekli mi?

Doğrulama, kodun belirlenmiş standartlara göre doğrulanmasıdır. HTML ve CSS kodunun doğruluğu için doğrulama vardır. Bir durumda HTML kodunun, diğerinde CSS kodunun kontrol edildiği açıktır.

Muhtemelen, birçoğu doğrulamanın gerekli olup olmadığını sormayı garip bulacaktır. Ancak İnternet'e bakarsanız, geçerli kodun isteğe bağlı olduğuna, bunun ekstra bir zaman kaybı olduğuna inanan birçok kişi olduğunu görebilirsiniz, çünkü tarayıcılar her türlü hatanın varlığında bile iyi çalışır.

Elbette çoğu durumda siteler geçersiz kod üzerinde iyi çalışabilir, ancak bu gibi durumlarda çapraz uygunluk garanti edilemez. Ne de olsa programlama dillerinin kendileri için standartlar var, ancak tarayıcıların hataları aynı şekilde düzelttiği gerçeği için elbette böyle bir standart yoktur ve olamaz. Bu nedenle, farklı tarayıcılar, farklı sayfa görüntülemeye yol açabilecek hataları farklı şekillerde çözebilir.

Ve genel olarak, bazı insanların neden "ve öyle olacak" ilkesine göre işlerine karşı bu kadar hayali bir tutuma sahip oldukları açık değildir. Bu nedenle, birisi kodun geçerliliğini kontrol etmesi gerekmediğine inanıyorsa, bu onun hakkıdır ve başka türlü ikna edilmesi olası değildir ve buna gerek yoktur.

Şimdi kodların geçerliliğinin doğrudan doğrulanmasına geçelim, önce HTML, sonra CSS.

HTML kodu nasıl doğrulanır

Özünde, şimdi görebildiğimiz gibi, kod doğrulama kontrolünün kendisi oldukça basittir. Ancak burada hataların giderilmesi genellikle belirli bir zaman gerektirir. Tabii ki, kod birkaç satırdan oluşuyorsa, burada zorluklar ortaya çıkamaz. Ancak, yüzlerce ve binlerce varsa, o zaman burada çok çalışmanız gerekebilir, hepsi kodun ne kadar iyi derlendiğine bağlıdır. Bu nedenle, çapraz uygunluk için ortak bir kontrolle bunu daha sık yapmak daha iyidir.

Burada geçerliliği kontrol etmek için en basit ve en yaygın seçeneği ele alacağız - bu, tarayıcı geliştiricilerinin desteğiyle web sayfası kodları için özellikler geliştiren "W3C Konsorsiyumu" sitesinin kullanımıdır.

HTML kodunu doğrulamak için https://validator.w3.org/ bağlantısını takip etmeniz yeterlidir; bu, doğrulanacak sayfanın adresini girmek için bir alan içeren bir sayfa açacaktır.

ekran görüntüsü 51


"Kontrol Et" butonuna tıkladıktan sonra kontrol sonucunu alıyoruz.


Bu durumda, HTML kodu geçerlidir, ancak lang özniteliğinin değerle birlikte kullanılması tavsiye edilir. "ru"çünkü sayfa Rusça kullanıyor.

Lang özniteliği, tarayıcıların kullanılan dile bağlı olarak tırnak işaretleri gibi belirli karakterleri doğru bir şekilde görüntülemesini sağlamak için tasarlanmıştır. Bu nedenle HTML koduna dahil etmemizde fayda var. Ve bunu html etiketinde yapacağız, böylece bu öznitelik tüm belge üzerinde etkili olabilir.

Bu eklemenin nasıl yapılacağı aşağıdaki tabloda gösterilmiştir.

    "ru" >

    . . .

Ve şimdi ikinci bir kontrol yaparsak, kodun hiçbir yorum yapmadan tamamen geçerli hale geldiğini görebiliriz.


Bu şekilde internette yayınlanan dosyayı kontrol ettik. Ancak sayfa henüz web'de yayınlanmadığında, gözat düğmesini kullanarak bir dosya yükleyerek veya doğrudan HTML kodunu kopyalamak için formu kullanarak geçerliliğini başka yollarla kontrol edebilirsiniz.

Ekran görüntüsü, web sayfası kodu doğrulama için doğrudan forma kopyalandığında son seçeneği gösterir.


Kontrolü yaptıktan sonra benzer bir sonuç alıyoruz ve kontrol edilen kod burada da gösterilecek. Hataların bulunması durumunda, aramayı basitleştirmek için vurgulanacaktır, bu da onları ortadan kaldırma işini büyük ölçüde basitleştirir.


CSS kodu nasıl doğrulanır

HTML kodu doğrulamasını ele aldık. CSS kodu tam olarak aynı sırada kontrol edilir. Yalnızca bu durumda, bu durumda http://jigsaw.w3.org/css-validator/ adresinde bulunan başka bir doğrulayıcı sayfası kullanmanız gerekir.

Açalım ve bir önceki sefer olduğu gibi kontrol edilecek sayfanın adresini girelim ve ardından "Kontrol Et" butonuna basalım.

Bu kontrolün sonucu ekran görüntüsünde gösterilir.


Gördüğünüz gibi, CSS kodumuz teknik özelliklere hatasız olarak tamamen uygundur, bu da iyi bir sonuçtur.

Bu durum için diğer doğrulama yöntemlerinin sırası, HTML kodu için benzer kontrollerle tamamen örtüşmektedir. Bu nedenle burada kendimizi tekrarlamayacağız ve doğrulama kontrolleri incelememizi sonlandıracağız.

Bundan sonra, sayfamızda çapraz görüntü olup olmadığını kontrol edeceğiz ve tüm tarayıcılarda aynı şekilde görüntülendiğinden emin olacağız, bu sitenin ana sayfasının düzenini tamamlayacaktır.

Ve bunu Yeni Yıl tatillerinden hemen sonra yapacağız.

Ve sonuç olarak, yaklaşan Yeni Yıl için herkesi tebrik edebiliriz! Ve Yeni Yılda sağlık, sevgi, neşe, refah ve elbette İnternette başarılı çalışma olasılığı için kendi web sitenizi oluşturmada büyük başarılar diliyorum!

Site kaynak dosyaları

Bu yazıda yapılan güncellemelerin bulunduğu sitenin kaynak dosyaları ekteki dosyadan indirilebilir. Ilave malzemeler.

Daha önceki yazılarımdan birinde bahsetmiştim. Ancak, bunun yanı sıra herkes bunu bilmiyor. HTML için doğrulayıcı, orada doğrulayıcı ve CSS için.

Anlam CSS geçerliliği HTML ile aynı: neredeyse alakasız. Benzer HTML yazarsan geçersiz CSS, o zaman sorun olmaz (tabii ki büyük hatalar olmadıkça), ancak geçerli bir kod her zaman iyidir. Bu tür kodlar açık ve yapılandırılmıştır, anlaşılması kolaydır, bu da özellikle düzeltildiğinde ve özellikle başkaları tarafından önemlidir. Ayrıca CSS geçerliliği işleme sürecini ve dolayısıyla sayfa yükleme hızını hızlandırır.

Ve son olarak, genellikle nadir görülen geçerlilik gözlemi göz önüne alındığında, geçerli bir kod her zaman saygıyı emreder; bu, bunu profesyonel olarak yapıyorsanız önemlidir.

İle CSS geçerliliğini kontrol et, bunu kullanmalısın W3 hizmeti: http://jigsaw.w3.org/css-validator/ .

hemen söyleyeyim, aksine HTML, yapmak CSS geçerliçok daha kolay, çünkü çoğunlukla tamamen kaçınılması gereken istisnalar dışında, çoğunlukla yalnızca büyük hatalar vardır.

Özetleyeyim. Kodu geçerli kılmak hiç gerekli değil, ancak böyle bir sitenin arama motorları tarafından indekslenmesi daha kolay olacağından bunu yapmanızı şiddetle tavsiye ediyorum ( HTML geçerliliği), daha hızlı çalışın, düzenlemesi daha kolay ve profesyonellerin saygısını kazanın.

Son zamanlarda, temalarımın geçerliliği ve genel olarak doğrulama konusunda kullanıcılardan birkaç soru alıyorum. Bu yazıda onlara cevap vermek istiyorum.

geçerlilik nedir?


Kodun geçerliliğinin, herhangi bir kodun tek, evrensel bir özelliği olduğuna inanılmaktadır.
Aslında geçerlilik, belgenin html kodunun doktipte belirtilen veya HTML5'te ima edilen belirli bir dizi kurala uygunluğudur.
Yani geçerlilik göreceli bir kavramdır, çünkü kurallar ve gereksinimleri de farklıdır.
Daha açık hale getirmek için, css-live.ru sitesinde bulduğum bir örneği vereceğim:

Konut binalarının ve nükleer santrallerin inşası için farklı SNiP'ler (bina kodları ve yönetmelikleri) geçerlidir, bu nedenle bir dizi kurala göre geçerli olan bir belge diğerine göre geçerli olmayabilir (standartlara göre inşa edilmiş bir nükleer santral). bir konut binası iyi olurdu!).

Belge türü genellikle html doğrulamasının planlandığı belgeye işaret eder, ancak en uygun tarayıcı modunu seçmek için pragmatik nedenlerle seçilebilir.
XHTML5'in bir doktipi olmayabilir ama geçerli olabilir.

Doğrulama - bu nedir?

Basit bir ifadeyle doğrulama, kodu kontrol etme ve onu seçilen doküman tipine (DTD) uygun hale getirme sürecidir.

Geçerlilik nasıl kontrol edilir?

HTML kodunun geçerliliği, doğrulayıcı adı verilen bir araç tarafından kontrol edilir.
En ünlü w3c doğrulayıcı https://www.w3.org'dur.
w3c doğrulayıcı birkaç kod denetimi gerçekleştirir.
ana olanlar:

  1. Sözdizimi hatalarını kontrol edin:
    habrahabr.ru/post/101985'ten örnek:
    doğru sözdizimi olsa da geçersiz bir HTML etiketidir
    Bu nedenle sözdizimi denetimi, iyi HTML kodu yazmak için asgari düzeyde faydalıdır.
  2. Etiket yerleştirme kontrolü:
    Bir HTML belgesinde, etiketler açıldıklarının tersi sırayla kapatılmalıdır. Bu kontrol, kapatılmamış veya yanlış kapatılmış etiketleri tespit eder.
  3. DTD'ye göre HTML doğrulaması:
    Kodun belirtilen DTD - Belge Türü Tanımına (doküman türü) nasıl karşılık geldiğinin kontrol edilmesi. Etiket adlarını, niteliklerini ve "gömme" etiketlerini (bir türdeki etiketlerin başka bir türdeki etiketlerin içinde) kontrol edilmesini içerir.
  4. Yabancı Öğeleri Kontrol Etme:
    Kodda olan ancak doktipte olmayan her şeyi bulacaktır.
    Örneğin, özel etiketler ve nitelikler.

CSS kodunun geçerliliğini kontrol etmek için bir css doğrulayıcı vardır - http://jigsaw.w3.org/css-validator.
Kod Geçerliliği- bu, belirtilen kurallar dizisine göre resmi OB'nin yokluğunun mekanik kontrolünün sonucudur.
Doğrulamanın bir araç olduğunu, kendi başına bir değer olmadığını anlamalısınız.
Deneyimli mizanpaj tasarımcıları genellikle HTML veya CSS doğrulama kurallarının nerede ihlal edilebileceğini ve nerede ihlal edilemeyeceğini ve bu veya bu doğrulama hatasını neyin tehdit ettiğini (veya tehdit etmediğini) bilir.
Bir sitenin geçerli bir kod oluşturmadığı durumlara örnekler:

  • daha kullanışlı ve daha hızlı - Javascript/AJAX için özel nitelikler veya
  • SEO optimizasyonu - ARIA işaretlemesi.

Geçerlilik adına geçerliliğin bir anlamı olmadığı açıktır.
Kural olarak, deneyimli düzen tasarımcıları aşağıdaki kurallara uyar:
- Kodda büyük hatalar olmamalıdır.
- Küçük olanlar tolere edilebilir, ancak yalnızca haklı nedenlerle.
Html/CSS doğrulama hatalarıyla ilgili olarak:

Doğrulama hataları (VF'ler) gruplara ayrılabilir:

  • Şablon dosyalarındaki OV:
    Bulmak ve düzeltmek zor değil.
    Küçük hatalardan herhangi biri siteyi daha işlevsel veya daha hızlı hale getirmeye yardımcı oluyorsa, bunlar bırakılabilir.
  • Siteye bağlı üçüncü taraf komut dosyalarındaki OV:
    Örneğin, bir Vkontakte widget'ı, bir Twitter komut dosyası veya YouTube video dosyaları.
    Bunları düzeltmenin bir yolu yok çünkü bu dosyalar ve komut dosyaları başka sitelerde bulunuyor ve bunlara erişimimiz yok.
  • Doğrulayıcının anlamadığı CSS kuralları:
    Doğrulayıcı, site kodunun belirli bir HTML veya CSS sürümüyle eşleşip eşleşmediğini kontrol eder.
    Şablonda CSS sürüm 3 kurallarını kullandıysanız ve doğrulayıcı sürüm 2.1'e göre kontrol yaparsa, o zaman, öyle olmasalar da tüm CSS3 kurallarını hata olarak kabul eder.
  • İstenilen sonucu elde etmek için sitede istemeden bırakılması gereken OV. Örneğin:
    • noindex etiketleri. Geçerli değiller ama çok gerekliler ve buna katlanmak zorundayız.
    • haki. Bazı tarayıcılarda sitenin doğru görüntüsünü elde etmek için bazen hack kullanmanız gerekir - yalnızca belirli bir tarayıcının anlayabileceği kod.
  • Doğrulayıcı hataları.
    Genellikle herhangi bir etiket görmez (örneğin, kapanış etiketleri) ve OB'nin bulunmadığı yerlerde rapor verir.

Bir çalışma sitesinde neredeyse her zaman bir tür OV olacağı ortaya çıktı.
Ayrıca, birçoğu olabilir.
Örneğin, Google, Yandex ve mail.ru'nun ana sayfalarının her biri birkaç düzine hata içeriyor.
Ancak tarayıcılarda sitelerin görüntüsünü bozmazlar ve çalışmalarına müdahale etmezler.
Yukarıda yazdığım her şey konularım için geçerlidir.

Karmaşık konular şunları içerir:

  • WordPress özellikleri (ör. Kategori()), bu geçersiz bir kod verir.
  • Video barındırma sitelerinden, örneğin YouTube'dan video çıkışı ve YouTube kodunda ne sizin ne de benim etkileyemeyeceğimiz çok sayıda OB var.
  • Bu ağların komut dosyaları kullanılarak bağlanan ve OB içeren sosyal ağların düğmeleri.
  • CSS3 ve HTML5 kuralları, eski sürüm doğrulayıcılar tarafından hata olarak kabul edilir.
    Aynı zamanda CSS3 ve HTML5 sürümlerinin doğrulayıcıları eski kuralları hata olarak kabul ediyor :).
  • Bazen, Internet Explorer tarayıcısında veya diğer tarayıcıların daha eski sürümlerinde doğru görüntü elde etmek için, bu belirli tarayıcı için site görüntüleme kuralları yazmak için yalnızca belirli bir tarayıcının anlayabileceği sözde hack kodunu kullanmanız gerekir.

Sonuç olarak, yalnızca çok basit konuları düzenlerken tamamen geçerli bir kod alabilirsiniz, yani. minimum miktarda işlevsellik içerenler.
Konularımdan herhangi birinin düzenini bitirdikten sonra, her zaman bir doğrulayıcı ile kontrol ediyorum ve temanın performansını kaybetmeden düzeltilebilecek tüm OB'leri düzeltiyorum.
Yani, çalışan bir işlevsellik ile geçerlilik arasında bir seçim varsa, işlevselliği seçerim.
Kendi temalarınızı oluşturuyorsanız, aynısını yapmanızı tavsiye ederim.
Benim bakış açımdan (ve ayrıca düzen tasarımcılarının çoğunluğunun bakış açısından), nihai gerçek olarak html/CSS doğrulamasına yönelik tutum yanlıştır. Yalnızca şu OB'leri düzeltmek zorunludur:
- tarayıcının sayfayı doğru şekilde görüntülemesini engelleyin (kapatılmamış ve yanlış yerleştirilmiş etiketler).
- sayfa yüklemeyi yavaşlatır (yanlış bağlanmış komut dosyaları).
- temanın işlevselliği bozulmadan düzeltilebilir.
Umarım doğrulama ile ilgili tüm sorularınızı yanıtlayabilmişimdir.

Html kodunun geçerliliği açısından var olanlardan daha önce bahsetmiştim. Bu en azından arada bir yapılmalıdır, çünkü geçerlilik hem html hem css siteyi, yani kaynağınızın farklı tarayıcılarda aynı görüntüsünü güçlü bir şekilde etkiler (popüler ve en iyi web tarayıcıları hakkında genel bir makale, umarım bunlardan biri lehine bir seçim yapmanıza yardımcı olur).

Ayrıca, arama motorlarının bu aşamada siteleri sıralarken CSS ve HTML kod hatalarını dikkate almamasına rağmen, gelecekte her şeyin değişebileceğini ve güzel tasarlanmış bir projenin olduğu bir duruma gelebileceğinizi daha önce belirtmiştim. insanlar için yapılmış, doğrulamayı geçemediği için potansiyel izleyicilerin bir kısmını kaybedebilir. Eh, hepsi şarkı sözleri, burada herkes her şeyin ne kadar önemli olduğuna kendisi karar veriyor.

Bu makaleyi yazdığımdan beri, artık benim fikrime aşina olduğunuzu düşünüyorum, bu, örneğin seo optimizasyonunun Google ve Yandex indekslemesinden bağlantıların ve metin parçalarının kapatılması gibi önemli bir parçası ile birlikte dikkate değer olduğunu düşündüğüm anlamına gelir. yetkin kullanım.

Tamam, dedikleri gibi, konuya daha fazla. İlk olarak, biraz CSS hakkında. css( Basamaklı Stil Şablonu- Basamaklı Stil Sayfaları), HTML belgelerinin görüntüsünü tanımlayan bir stil dilidir. Yani HTML, sayfanın içeriğini anlatıyorsa, CSS bu içeriği biçimlendirir, başka bir deyişle, ona eksiksiz bir görünüm verir. Bu arada sitenin hızını arttırmak için tema dosyalarınızı kaydırmanız faydalı olacaktır.

W3C Doğrulayıcı: CSS Kodunun Geçerliliğini Kontrol Etme

Şimdi bir belgenin (web sitemizin sayfaları veya WordPress blogunun sayfaları) geçerliliğini nasıl kontrol edeceğimize geçelim. HTML kodunu kontrol etme durumunda olduğu gibi, . Gelelim CSS doğrulama servisine:


Gördüğünüz gibi, W3C doğrulayıcı ile CSS'yi doğrulamanın üç yolu vardır. Bu arada, doğrulayıcı sayfasının altında, geçerlilik için HTML kodunun kontrol edilmesi gerektiğini belirten bir not olduğunu unutmayın. Yalnızca her iki doğru kod da tüm belgenin doğruluğunu garanti eder. Kontrol edilecek URL'yi girin. Örneğin, blogumun ana sayfasını kontrol edelim:


Yalnızca 2 hata bulunduğundan, W3C doğrulayıcının CSS kod hatalarını denetlemesinin sonucu hayal kırıklığı olarak adlandırılamaz. Tabii ki, bu hatalar farklıdır, her durumda farklı sonuçlara neden olurlar. Onları ortadan kaldırmak için neler yapabileceğimize bir bakalım. Burada her şey uygundur, çünkü W3C doğrulayıcı yalnızca yanlış kod içeren bir belgeye bağlantı vermekle kalmaz, aynı zamanda bulunduğu satır numarasını da verir. Bu arada, aşağıda, uyarılar ve hatalar listesinden sonra, kullanabileceğiniz doğru CSS kodunun bir varyantı görüntülenecektir:


CSS doğrulama sonuç sayfasında belgeye bir bağlantı var css.ie, tema klasöründe bulunur. Tarayıcılar arası bir blog (popüler tarayıcılarda aynı görüntü) elde etmek için oluşturuldu. Ayrıca, sitenin görünümünü, özellikle eski sürümlerini (IE9 bu konuda çok daha iyi) bozma açısından çeşitli “söveler” ile günah işleyen Internet Explorer'ın çeşitli modifikasyonları içindir. Çapraz tarayıcı uyumluluğu projenin ilerlemesi için çok önemlidir, ancak inceleme sonucunda bu belgenin W3C standartlarına uymayan özellikler içerdiği ortaya çıktı.

Böylece, hatalar içeren satır 3 ve 12'yi elde ederiz. Bunları düzeltmek için ayrıştırma hatasını kaldırın html (filtre: ifade(document.execCommand("BackgroundImageCache", false, true));) ve mülk .zoom. Şimdi sitelerin programlama ve yerleşim düzeninin inceliklerine girmeyeceğim, sadece mülkün ifade IE6'da oluşan can sıkıcı arka plan görüntüsü titreme efektinden kurtulmaya yardımcı olur.

Yani, kullanımı boşa çıkan tarayıcıda ve bu "aksaklığın" sonraki sürümlerinde artık gözlenmemektedir. IE6 kullanan potansiyel ziyaretçi sayısı minimum seviyeye gelene kadar bir süre daha bu “kürü” kullanmaya devam edeceğimi hemen söylemeliyim. Ancak, netlik için, size W3C doğrulayıcısının buna nasıl tepki vereceğini göstermek için onu kaldıracağım.

Bir öğenin ölçekleme faktörünü ayarlayan.zoom özelliği, W3C Uluslararası Standardının bir parçası değildir ve Opera, Safari tarayıcılarının çok eski sürümleri tarafından desteklenir. IE8(Sürüm 9 neredeyse tamamen "yasalara uygundur", bu yüzden yakında, umarım, web yöneticileri, maksimum çapraz tarayıcı uyumluluğu elde etmek için ek kodlar kullanma ihtiyacından kurtulacaktır). Şimdi geçersiz öğeler içeren belgeye bakalım ve düzeltelim:


Bu belge Bulutlu tema klasörümde, doğrulama kontrolünden geçemeyen yukarıdaki öğeleri siliyorum. Ayrıca, geçerlilik kontrolünün sonuçlarında, hatalara ek olarak, birçok sözde uyarı da vardı:


Örneğin, en yaygın olanlarından nasıl kurtulacağınızı açıkça göstermeye çalışacağım ve bu arada anlamlarını açıklayacağım. Gördüğünüz gibi, W3C doğrulayıcı metin ve arka plan için aynı renklerin varlığı konusunda uyarır. Arama motorları bu durumu ciddi yaptırımlarla dolu bilgi gizleme olarak değerlendirebildiğinden, bunun her durumda genellikle istenmeyen olduğunu söylemeliyim.

Tabii bu her zaman böyle olmuyor ama bu tehlike de hafife alınmamalı. Öyleyse durumu düzeltmeye devam edelim. Dosyayı kopyalamak en iyisidir stil.css HTML ve PHP'deki temanız, bahsettiğim notepad++ editörü satır numarasına göre arama yapmayı kolaylaştırıyor:

Artık tema dosyanızda bu çizgilerin nerede olduğunu biliyoruz, tonu biraz değiştirerek rengi düzeltiyoruz. Onaltılık renk sisteminde #ffffff beyaza karşılık gelir. Bunu şu şekilde değiştiririz: son f yerine d gireriz, böylece biraz farklı bir beyaz tonu elde ederiz; şimdi değişiklikler kullanıcılar tarafından fark edilmeyecek, ancak arama motorları farkı görecek:


Kaynak sayfalarınızın CSS kodunun geçersiz kısımlarını bu şekilde düzeltebilirsiniz. Aynı şekilde diğer uyarılarla işaretlenmiş ve düzeltilmesi gereken bölümleri de buluyoruz.483. satıra ilişkin uyarılara gelince (bu arada, epeyce vardı, yaklaşık 10). Kontrol ettikten sonra, nedenlerinin sayfalandırma sağlayan WP Sayfa Numaraları eklentisi olduğunu buldum.

Bu, bu eklentiyi devre dışı bırakmamı istedi ve sonunda onu sunucu yükünü azaltmaya yönelik bir adım olan kod enjeksiyonu ile değiştirmemin nedeni buydu. Bunu yaptığım anda, bu eklenti tarafından kodun geçerliliğinin ihlal edildiğine ilişkin uyarılar, yeniden kontrol ettikten hemen sonra kayboldu. Yukarıdaki hareketlerden sonra, W3C doğrulayıcısını kullanarak CSS geçerliliğini yeniden kontrol ediyoruz:


Artık W3C doğrulayıcıyı kullanarak bir CSS belgesinin (bir web sitesinin veya blogun web sayfası) geçerliliğini nasıl kontrol edeceğinizi biliyorsunuz. Sonuç olarak, herkesin CSS kodunun geçerliliğini kontrol etme derecesine ve sıklığına kendisinin karar verdiğini, bunların hepsinin koşullara bağlı olduğunu, ancak yine de, zaman zaman bunun derin inancımda yapılması gerektiğini belirtmek isterim. Yeni materyalleri e-posta ile almak için blog güncellemelerine abone olun. Bu nedenle, izin vermeme izin verin, umarım bir süreliğine ayrılırız.

Doğrulama, CSS kodunun CSS2.1 veya CSS3 spesifikasyonuna göre kontrol edilmesi anlamına gelir. Buna göre, hata içermeyen doğru koda geçerli, spesifikasyonu karşılamayan koda geçersiz denir. Kodu site üzerinden kontrol etmek en uygunudur. http://jigsaw.w3.org/css-validator/, bu hizmeti kullanarak belgenin adresini belirleyebilir, bir dosya yükleyebilir veya yazılan metni kontrol edebilirsiniz. Hizmetin büyük bir artısı, Rusça ve Ukraynaca dillerinin desteklenmesidir.

URI'yi kontrol et

Bu sekme, İnternette barındırılan bir sayfanın adresini belirlemenizi sağlar. http:// protokolü atlanabilir, otomatik olarak eklenecektir (Şekil 1.42).

Pirinç. 1.42. Adrese göre belge doğrulama

Adresi girdikten sonra “Kontrol Et” düğmesine tıklayın ve iki yazıdan biri görünecektir: “Tebrikler! Başarı durumunda hata bulunamadı" veya geçersiz kodda "Maalesef aşağıdaki hataları bulduk". Hata veya uyarı mesajları, bir satır numarası, bir seçici ve hatanın bir açıklamasını içerir.

Yüklenen dosyayı kontrol edin

Bu sekme, bir HTML veya CSS dosyası yüklemenizi ve bu dosyada hata olup olmadığını kontrol etmenizi sağlar (Şekil 1.43).

Pirinç. 1.43. Bir dosyayı yüklerken kontrol etme

Hizmet, dosya türünü otomatik olarak tanır ve bir HTML belgesi belirtilmişse, doğrulama için stili ondan çıkarır.

Yazılan metni kontrol edin

Son sekme HTML veya CSS kodunun doğrudan girişi içindir ve sadece stil kontrol edilecektir (Şekil 1.44).

Pirinç. 1.44. Girilen kodun kontrol edilmesi

Bu seçenek, kod üzerinde çeşitli deneyler yapmak veya küçük parçaları hızlı bir şekilde kontrol etmek için en uygun gibi görünüyor.

CSS sürüm seçimi

CSS3, önceki sürüme kıyasla birçok yeni stil özelliğine sahiptir, bu nedenle kod incelemesi sürüme özel olmalıdır. Varsayılan olarak, hizmet CSS2.1'i belirtir, bu nedenle kodunuzu CSS3'e göre kontrol etmek istiyorsanız, bunu açıkça belirtmelisiniz. Bunu yapmak için, "Ek özellikler" metnine tıklayın ve açılan blokta "Profil" listesinden CSS3'ü seçin.

Pirinç. 1.45. Kontrol Edilecek CSS Sürümünü Belirtme

Tanımlayıcılar ve sınıflar

Periyodik olarak, tanımlayıcıları düzende kullanmanın tavsiye edilebilirliği hakkında bir anlaşmazlık ortaya çıkar. Ana argüman, tanımlayıcıların komut dosyaları kullanarak web sayfası öğelerine erişmek ve bunları değiştirmek için olduğu ve öğelerin stillerini değiştirmek için yalnızca sınıfların kullanılması gerektiğidir. Gerçekte, hangi stillerin kullanıldığı önemli değildir, ancak tanımlayıcıların ve sınıfların bazı özelliklerinin yanı sıra geliştiricilerin bekleyebileceği tuzakların farkında olmalısınız.

Başlangıç ​​olarak, bu seçicilerin karakteristik özelliklerini listeliyoruz.

tanımlayıcılar

Belgenin kodunda her tanımlayıcı benzersizdir ve yalnızca bir kez dahil edilmelidir.

Tanımlayıcı adı büyük/küçük harf duyarlıdır.

getElementById yöntemi ile bir öğeye kimliğine göre erişebilir ve öğenin özelliklerini değiştirebilirsiniz.

Bir tanımlayıcının stili, sınıflara göre önceliklidir.

Sınıflar kodda birden çok kez kullanılabilir.

Sınıf adları büyük/küçük harfe duyarlıdır.

Bir etikete birkaç sınıf eklenerek sınıflar birbirleriyle birleştirilebilir.

tanımlayıcılar

Bazı öğelerin stilini anında değiştirmek veya web sayfası çalışırken içlerinde bir metin görüntülemek istiyorsanız, tanımlayıcılarla bu çok daha kolaydır. Öğeye, parametresi tanımlayıcının adı olan getElementById yöntemi aracılığıyla erişilir. Örnek 1-70, bir form metin alanına userName adlı bir tanımlayıcı ekler, ardından kullanıcının alana bir metin girip girmediğini kontrol etmek için bir JavaScript işlevi kullanır. Metin yoksa, ancak Gönder düğmesine tıklanırsa, etiketin içinde msg kimliğine sahip bir mesaj görüntülenir. Her şey doğruysa, form verileri action özniteliği tarafından belirtilen adrese gönderilir.

Örnek 1.70. Form veri doğrulama XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

Form doğrulama

İLGİLİ MAKALELER