CSS2 ve CSS3 Arasındaki Fark

CSS2 ve arasındaki en büyük fark CSS3 CSS3'ün farklı bölümlere ayrılmış olmasıdır. modüller. Bu modüllerin her biri, tavsiye sürecinin çeşitli aşamalarında W3C'de ilerlemektedir. Bu süreç, çeşitli CSS3 parçalarının farklı üreticiler tarafından tarayıcıda kabul edilmesini ve uygulanmasını çok daha kolay hale getirdi.

Bu süreci, her şeyin tüm bilgilerle birlikte tek bir belge olarak sunulduğu CSS2'de yaşananlarla karşılaştırırsanız. Basamaklı Stil Şablonu içindeki bilgilerle, tavsiyeyi daha küçük, bireysel parçalara ayırmanın avantajlarını görmeye başlarsınız. Modüllerin her biri üzerinde ayrı ayrı çalışıldığından, geliştiriciler CSS3 modülleri için çok daha geniş bir tarayıcı desteği yelpazesine sahiptir.

Yeni CSS3 Seçiciler

CSS3, yeni CSS seçicileri, yeni bir birleştirici ve bazı yeni sözde öğelerle CSS kuralları yazmak için birkaç yeni yol sunar.

Üç yeni özellik seçici var:

• Öznitelik başlangıcı tam olarak eşleşir:

  eleman[foo^="bar"]

  Öğenin "bar" ile başlayan foo adlı bir özniteliği vardır, ör.
instagram viewer
• Nitelik bitişi tam olarak eşleşir:

  eleman[foo$="bar"]

  Öğenin, "bar" ile biten foo adlı bir özniteliği vardır, ör.
• Özellik eşleşmeyi içerir:

  eleman[foo*="bar"]

  Öğenin bir nitelik aranan ahmak "bar" dizesini içeren

16 yeni sözde sınıf tanıtıldı:

• :kök
  • Belgenin kök öğesi.
• :n. çocuk (n)
  • Tam alt öğeleri eşleştirmek için bunu kullanın veya değişken eşleşmeler elde etmek için değişkenleri kullanın.
• :n.-son-çocuk (n)
  • Sonuncusundan başlayarak tam alt öğeleri eşleştirin.
• :n'inci tür (n)
  • Belge ağacında kendisinden önce aynı ada sahip kardeş öğeleri eşleştirin.
• :türünün sonuncusu (n)
  • Aynı ada sahip kardeş öğeleri alttan yukarı doğru sayarak eşleştirin.
• :son çocuk
  • son maç alt öğe ebeveynin.
• :türünün ilk örneği
  • Bu türün ilk kardeş öğesini eşleştirin.
• :türünün son örneği
  • Bu türün son kardeş öğesini eşleştirin.
• :tek çocuk
  • Ebeveyninin tek çocuğu olan öğeyi eşleştirin.
• :tek tip
  • Türünde tek olan öğeyi eşleştirin.
• :boş
  • Alt öğesi olmayan öğeyi eşleştirin (metin düğümleri dahil).
• :hedef
  • Yönlendiren URI'nin hedefi olan bir öğeyi eşleştirin.
• :etkin
  • Etkinleştirildiğinde öğeyi eşleştirin.
• :devre dışı
  • Devre dışı bırakıldığında öğeyi eşleştirin.
• :kontrol
  • İşaretlendiğinde öğeyi eşleştirin (radyo düğmesi veya onay kutusu).
• :değil(ler)
  • Öğe basitle eşleşmediğinde eşleştir seçiciler.

Yeni bir birleştirici var:

• elemanA ~ elemanB
  • elementB, elementA'dan sonra bir yere geldiğinde eşleştirin, hemen değil

Yeni Mülkler

CSS3 ayrıca birkaç yeni CSS özelliği tanıttı. Bu özelliklerin çoğu, muhtemelen aşağıdaki gibi bir grafik programıyla daha fazla ilişkilendirilecek görsel stiller oluşturur: Photoshop. Bunlardan bazıları, border-radius veya box-shadow gibi, CSS3'ün piyasaya sürülmesinden beri var. Diğerleri, flexbox veya hatta CSS Izgara, hala sıklıkla CSS3 eklemeleri olarak kabul edilen daha yeni stillerdir.

CSS3'te kutu modeli değişmedi. Ancak kutularınızın arka planlarını ve kenarlıklarını şekillendirmenize yardımcı olabilecek bir dizi yeni stil özelliği var.

Birden Fazla Arka Plan Resmi

Arka plan görüntüsü, arka plan konumu ve arka plan tekrarı stillerini kullanarak, kutuda üst üste katmanlanacak birden çok arka plan görüntüsü belirleyebilirsiniz. İlk görüntü, kullanıcıya en yakın katmandır ve aşağıdakiler arkaya boyanmıştır. Bir arka plan rengi varsa, tüm görüntü katmanlarının altına boyanır.

Yeni Arka Plan Stili Özellikleri

CSS3'te ayrıca bazı yeni arka plan özellikleri vardır:

• arka plan klibi
• Bu özellik, arka plan görüntüsünün nasıl kırpılacağını tanımlar. Varsayılan, kenarlık kutusudur, ancak dolgu kutusu veya içerik kutusu olarak değiştirilebilir.
• arka plan kökenli
• Bu özellik, arka planın dolgu kutusuna mı, kenarlık kutusuna mı yoksa içerik kutusuna mı yerleştirileceğini belirler.
• arka plan boyutu
• Bu özellik gösterir arka plan resminin boyutu. Size izin verir daha küçük resimleri sayfaya sığdırmak için uzatın.

Mevcut Arka Plan Stili Özelliklerinde Yapılan Değişiklikler

Mevcut arka plan stili özelliklerinde de birkaç değişiklik var:

• arka plan-tekrar
  • Bu özellik için iki yeni değer var — Uzay ve yuvarlak. Boşluk, döşenen görüntüyü kırpılmadan kutunun içinde eşit şekilde yerleştirir. Round, arka plan görüntüsünü kutuda birçok kez döşenecek şekilde yeniden ölçeklendirir.
• arka plan eki
  • Yeni bir "yerel" değeri eklenir, böylece o öğe bir kaydırma çubuğuna sahip olduğunda arka plan öğenin içeriğiyle birlikte kayar.
• arka fon
  • Arka plan stenografi özelliği, boyut ve orijin özelliklerini ekler.

CSS3 Kenarlık Özellikleri

CSS3'te kenarlıklar, alıştığımız stiller (düz, çift, kesikli vb.) veya bir görüntü olabilir. Artı, CSS3 yuvarlatılmış köşeleri destekler. Kenarlık görüntüleri ilginçtir çünkü dört kenarlığın tümünün bir görüntüsünü oluşturursunuz ve ardından CSS'ye bu görüntüyü sınırlarınıza nasıl uygulayacağını söylersiniz.

Yeni Kenarlık Stili Özellikleri

CSS3'te bazı yeni sınır özellikleri var:

• sınır yarıçapı
• sınır-sağ-üst-yarıçap, sınır-alt-sağ-yarıçap, sınır-alt-sol-yarıçap, sınır-üst-sol-yarıçap
• Bu özellikler, bordürlerinizde yuvarlatılmış köşeler oluşturmanıza olanak tanır.
• sınır-görüntü-kaynak
• Önceden tanımlanmış kenarlık stilleri yerine kullanılacak görüntü kaynak dosyasını belirtir.
• kenarlık-görüntü-dilim
• Kenarlık görüntüsü kenarlarından içe doğru olan uzaklıkları temsil eder.
• kenarlık-görüntü genişliği
• Kenarlık resminiz için genişlik değerini tanımlar.
• sınır-görüntü-başlangıç
• Kenarlık-görüntü alanının kenarlık kutusunun ötesine uzanma miktarını belirtir.
• kenarlık-görüntü-uzatma
• Kenarlık görüntüsünün kenarlarının ve orta bölümlerinin nasıl döşeneceğini veya ölçekleneceğini tanımlar.
• sınır-görüntü
• Tüm border-image özellikleri için stenografi özelliği.

Kenarlıklar ve Arka Planlarla İlgili Ek CSS3 Özellikleri

Sayfa sonunda, sütun sonunda veya satır sonunda (satır içi öğeler için) bir kutu kırıldığında, kutu-dekorasyon-break özellik, yeni kutuların kenarlık ve dolgu ile nasıl sarılacağını tanımlar. Arka planlar, bu özelliği kullanarak birkaç kırık kutu arasında bölünür.

yeni bir kutu-gölge özellik, kutu öğelerine gölgeler ekler.

CSS3 ile, artık tabloları olmayan veya karmaşık olmayan birkaç sütunlu bir web sayfasını kolayca oluşturabilirsiniz. div etiket yapıları. Tarayıcıya gövde öğesinin kaç sütuna sahip olması gerektiğini ve bunların ne kadar geniş olması gerektiğini söylemeniz yeterlidir. Ayrıca, sütunun yüksekliğini kapsayan kenarlıklar (kurallar) ve arka plan renkleri ekleyebilirsiniz; metniniz tüm sütunlardan otomatik olarak akacaktır.

Sütunların Sayısını ve Genişliğini Tanımlayın

üç yeni var özellikleri sütunlarınızın sayısını ve genişliğini tanımlamanıza izin verir:

• sütun genişliği
  • Sütunlarınızın olması gereken genişliği tanımlar. Tarayıcı daha sonra metni, alanı o kadar geniş sütunlarla doldurmak için akıtır.
• sütun sayısı
  • Sayfadaki sütun sayısını tanımlar. Tarayıcı daha sonra boşluğa sığacak kadar geniş, ancak yalnızca belirttiğiniz sayı kadar sütunlar oluşturacaktır.
• sütunlar
  • Genişliği veya sayıyı (veya her ikisini de, ancak bu nadiren anlamlıdır) tanımlayabileceğiniz stenografi özelliği.

CSS3 Sütun Boşlukları ve Kuralları

Aynı çok sütunlu senaryoda sütunlar arasına boşluklar ve kurallar yerleştirilir. Boşluklar sütunları birbirinden ayırır, ancak kurallar yer kaplamaz. Bir sütun kuralı, boşluğundan daha genişse, bitişik sütunlarla örtüşecektir. Sütun kuralları ve boşluklar için beş yeni özellik vardır:

• sütun boşluğu
  • Sütunlar arasındaki boşlukların genişliğini tanımlar.
• sütun-kural-renk
  • Kuralın rengini tanımlar.
• sütun kuralı stili
  • Kuralın stilini tanımlar (düz, noktalı, çift vb.).
• sütun-kural genişliği
  • Kuralın genişliğini tanımlar.
• sütun kuralı
  • Üç sütun kuralı özelliğinin tümünü aynı anda tanımlayan bir kestirme özellik.

CSS3 Sütun Sonları, Yayılan Sütunlar ve Sütunları Dolduran

sütun kesmeler, disk belleğine alınmış içerikte kesmeleri tanımlamak için kullanılan CSS2 seçeneklerinin aynısını kullanır, ancak üç yeni özellikle: mola öncesi, ara vermek, ve zorla içeri girmek.

Tablolarda olduğu gibi, column-span özelliğiyle öğeleri sütunlara yayılacak şekilde ayarlayabilirsiniz. Bu, daha çok bir gazete gibi birden çok sütuna yayılan başlıklar oluşturmanıza olanak tanır.

Sütunları doldurmak, her sütunda ne kadar içerik olacağına karar verir. Dengeli sütunlar, her sütuna aynı miktarda içerik koymaya çalışırken otomatik, içeriği sütun dolana kadar akar ve ardından bir sonrakine geçer.

CSS3'te CSS2'ye Dahil Olmayan Daha Fazla Özellik

CSS3'te, CSS2'de olmayan pek çok ek özellik vardır:

• CSS Şablonu yerleşim modülü ve CSS3 Izgara konumlandırma modülü: CSS ile ızgaralar oluşturma.
• CSS3 Metin modülü: Metnin ana hatlarını çizin ve hatta CSS ile gölgeler oluşturun.
• CSS3 Renk modülü: Şimdi opaklıkla.
• Kutu modelindeki değişiklikler: dahil seçim çerçevesi IE etiketi gibi davranan özellik.
• CSS3 Kullanıcı Arayüzü modülü: Size yeni imleçler, eylemlere yanıtlar, gerekli alanlar ve hatta öğeleri yeniden boyutlandırma olanağı verir.
• Medya sorguları: Medya sorguları bir stil sayfasının nasıl kullanılması gerektiğini tanımlarken size daha fazla esneklik sağlar. Örneğin, yalnızca 20em'den daha büyük bir görüntü alanına sahip elde taşınan cihazlar için bir stil sayfası tanımlayabilirsiniz.
• CSS3 Ruby modülü: Belgelere açıklama eklemek için metinsel yakut kullanan diller için destek sağlar.
• CSS3 Sayfalı Medya modülü: Disk belleğine alınmış ortam (kağıt, asetat vb.) için daha da fazla destek için.
• oluşturulan içerik: Özellikle disk belleğine alınmış medya için programlı olarak oluşturulan üstbilgileri ve altbilgileri, dipnotları ve diğer içeriği çalıştırma.
• CSS3 Konuşma modülü: İşitsel CSS'de değişiklikler.