Skip to content

CSS2 ve CSS3 Arasındaki Fark

16 de Nisan de 2021

CSS2 ve CSS3 arasındaki en büyük fark, CSS3’ün farklı bölümlere ayrılmış olmasıdır. modüller. Bu modüllerin her biri, öneri sürecinin çeşitli aşamalarında W3C’ye doğru ilerliyor. Bu süreç, çeşitli CSS3 parçalarının tarayıcıda farklı üreticiler tarafından kabul edilmesini ve uygulanmasını çok daha kolay hale getirdi. Bu süreci, her şeyin içinde tüm Basamaklı Stil Sayfaları bilgileriyle birlikte tek bir belge olarak sunulduğu CSS2 ile olanlarla karşılaştırırsanız, öneriyi daha küçük parçalara bölmenin 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ğinden yararlanır.

Yeni CSS3 Seçicileri

CSS3, yeni CSS seçicilerinin yanı sıra yeni bir birleştirici ve bazı yeni sözde öğelerle CSS kuralları yazmak için birkaç yeni yol sunar. Üç yeni özellik seçici vardır:

  • Öznitelik başlangıcı tam olarak eşleşir: element[foo^=”bar”]

    Elemanın foo adında “bar” ile başlayan bir özniteliği vardır, ör.

  • Öznitelik bitişi tam olarak eşleşiyor: öğe[foo$=”bar”]

    Öğe, “bar” ile biten foo adında bir niteliğe sahiptir, ör.

  • Öznitelik eşleşmeyi içerir:element[foo*=”bar”]

    Elemanın adında bir özniteliği vardır foo “bar” dizesini içeren.

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

  • :kök
    • Belgenin kök öğesi.
  • : nth-çocuk (n)
    • Bunu, alt öğeleri tam olarak eşleştirmek için kullanın veya değişken eşleşmeler elde etmek için değişkenler kullanın.
  • : nth-son-çocuk (n)
    • Sonuncudan itibaren sayılan alt öğeleri tam olarak eşleştirin.
  • : türünün n’si (n)
    • Belge ağacında kendilerinden önce gelen aynı ada sahip kardeş öğeleri eşleştirin.
  • : n’inci türünün sonuncusu (n)
    • Aşağıdan yukarı doğru sayarak aynı ada sahip kardeş öğeleri eşleştirin.
  • : son-çocuk
    • Ebeveynin son alt öğesini eşleştirin.
  • : ilk-tip
    • Bu türün ilk kardeş öğesini eşleştirin.
  • : türünün sonuncusu
    • Bu türün son kardeş öğesini eşleştirin.
  • : only-child
    • Ebeveyninin tek çocuğu olan öğeyi eşleştirin.
  • : tek-tip
    • Türünün tek olan öğesi ile eşleştirin.
  • :boş
    • Alt öğesi olmayan öğeyi eşleştirin (metin düğümleri dahil).
  • :hedef
    • Başvuran 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
    • Öğeyi işaretlendiğinde eşleştirin (radyo düğmesi veya onay kutusu).
  • : değil (ler)
    • Öğe basit seçicilerle eşleşmediğinde eşleşir.

Yeni bir birleştirici var:

  • elementA ~ elementB
    • B öğesi, hemen değil, A öğesinden sonra bir yerde takip ettiğinde eşleşir.

Yeni Özellikler

CSS3 ayrıca birkaç yeni CSS özelliği de getirdi. Bu özelliklerin çoğu, Photoshop gibi bir grafik programıyla daha fazla ilişkilendirilebilecek görsel stiller oluşturur. Bunlardan border-radius veya box-shadow gibi bazıları CSS3’ün piyasaya sürülmesinden bu yana ortalıkta. Flexbox ve hatta CSS Grid gibi diğerleri, hala 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ı biçimlendirmenize yardımcı olabilecek bir dizi yeni stil özelliği vardır.

Çoklu Arka Plan Resimleri

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ü belirtebilirsiniz. İlk görüntü kullanıcıya en yakın olan katmandır ve aşağıdakiler arkasına boyanmıştır. Arka plan rengi varsa, tüm görüntü katmanlarının altına boyanır.

Yeni Arka Plan Stili Özellikleri

CSS3’te bazı yeni arka plan özellikleri de vardır:

  • arka plan klibi
  • Bu özellik, arka plan görüntüsünün nasıl kırpılması gerektiğini tanımlar. Varsayılan, kenarlık kutusudur, ancak dolgu kutusu veya içerik kutusu olarak değiştirilebilir.
  • arkaplan kökenli
  • Bu özellik, arka planın dolgu kutusuna, kenarlık kutusuna veya içerik kutusuna yerleştirilip yerleştirilmeyeceğini belirler.
  • arka plan boyutu
  • Bu özellik, arka plan görüntüsünün boyutunu belirtir. Daha küçük resimleri sayfaya sığacak şekilde uzatmanıza olanak tanır.

Mevcut Arka Plan Stili Özelliklerindeki Değişiklikler

Mevcut arka plan stili özelliklerinde de birkaç değişiklik vardır:

  • arkaplan tekrar
    • Bu özellik için iki yeni değer var – Uzay ve yuvarlak. Boşluk, döşenen görüntüyü kırpılmadan kutu içinde eşit aralıklarla yerleştirir. Round, arka plan görüntüsünü kutuda bir kaç kez döşenecek şekilde yeniden ölçeklendirir.
  • arka plan eki
    • Yeni bir “yerel” değeri eklenir, böylece arka plan, bu öğenin bir kaydırma çubuğuna sahip olduğunda öğenin içeriğiyle kaydırılır.
  • arka fon
    • Arka plan steno özelliği, boyut ve kaynak özelliklerini ekler.

CSS3 Kenarlık Özellikleri

CSS3’te sınırlar alıştığımız stiller (düz, çift, kesikli vb.) Veya bir resim olabilir. Ayrıca, CSS3 yuvarlatılmış köşeleri destekler. Kenarlık resimleri ilginçtir çünkü dört kenarlığın tamamı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 vardır:

  • border-radius
  • border-top-right-radius, border-bottom-right-radius, kenarlık-alt-sol-yarıçap, border-top-left-radius
  • Bu özellikler, sınırlarınızda yuvarlatılmış köşeler oluşturmanıza olanak sağlar.
  • border-image-source
  • Önceden tanımlanmış kenarlık stilleri yerine kullanılacak görüntü kaynak dosyasını belirtir.
  • border-image-slice
  • Kenarlık görüntüsü kenarlarından içe doğru ofsetleri temsil eder.
  • border-image-width
  • Kenar görüntünüz için genişlik değerini tanımlar.
  • border-image-outset
  • Kenarlık görüntüsü alanının kenarlık kutusunun dışına taşma miktarını belirtir.
  • border-image-stretch
  • Kenarlık görüntüsünün yan ve orta kısımlarının nasıl döşenmesi veya ölçeklenmesi gerektiğini tanımlar.
  • border-image
  • Tüm border-image özellikleri için steno özelliği.

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

Bir kutu sayfa sonu, sütun sonu veya satır sonu (satır içi öğeler için) kesildiğinde, kutu dekorasyon molası özellik, yeni kutuların kenarlık ve dolgu ile nasıl sarılacağını tanımlar. Arka planlar, bu özelliği kullanarak birkaç bozuk kutu arasında bölünür. Yeni kutu gölgesi özelliği, kutu öğelerine gölgeler ekler. CSS3 ile artık tablo veya karmaşık olmayan birkaç sütun içeren bir web sayfasını kolayca kurabilirsiniz. div etiket yapıları. Tarayıcıya gövde öğesinin kaç sütuna sahip olması gerektiğini ve ne kadar geniş olması gerektiğini söylersiniz. Ayrıca, sütunun yüksekliğini kapsayan kenarlıklar (kurallar) ve arka plan renkleri ekleyebilirsiniz; metniniz otomatik olarak tüm sütunlardan akar.

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

Sütunlarınızın sayısını ve genişliğini tanımlamanıza izin veren üç yeni özellik vardır:

  • sütun genişliği
    • Sütunlarınızın olması gereken genişliği tanımlar. Daha sonra tarayıcı, alanı o kadar geniş sütunlarla doldurmak için metni akıtacaktır.
  • sütun sayısı
    • Sayfadaki sütun sayısını tanımlar. Tarayıcı daha sonra alana sığacak kadar geniş sütunlar oluşturacaktır, ancak yalnızca belirttiğiniz sayı kadar.
  • sütunlar
    • Genişliği veya sayıyı (veya her ikisini birden, ancak bu nadiren anlam ifade eder) tanımlayabileceğiniz Shorthand ö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 herhangi bir yer kaplamaz. Bir sütun kuralı, aralığından daha genişse, bitişik sütunlarla çakışacaktır. Sütun kuralları ve boşluklar için beş yeni özellik vardır:

  • sütun aralığı
    • Sütunlar arasındaki boşlukların genişliğini tanımlar.
  • sütun-kural-rengi
    • 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ğini aynı anda tanımlayan kısa bir özellik.

CSS3 Sütun Sonları, Sütunları Kapsayan ve Sütunları Doldurma

Sütun sonları, sayfalı içerikte kesmeleri tanımlamak için kullanılan aynı CSS2 seçeneklerini kullanır, ancak üç yeni özellikle birlikte: önce ara, sonra ara, ve hırsızlık. Tablolarda olduğu gibi, sütun aralığı özelliği ile öğeleri sütunlara yayılacak şekilde ayarlayabilirsiniz. Bu, bir gazete gibi birden çok sütuna yayılan başlıklar oluşturmanıza olanak tanır. Sütunları doldurmak, her bir sütunda ne kadar içerik olacağına karar verir. Dengeli sütunlar, her bir sütuna aynı miktarda içerik koymaya çalışırken, otomatik, sütun dolana kadar içeriği içeri akıtır ve ardından bir sonrakine geçer.

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

CSS3’te CSS2’de bulunmayan birçok ek özellik vardır:

  • CSS Şablonu düzen 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 alt gölgeler oluşturun.
  • CSS3 Renk modülü: Şimdi opaklıkla.
  • Kutu modelindeki değişiklikler: IE etiketi gibi davranan bir seçim çerçevesi özelliği içerir.
  • CSS3 Kullanıcı Arayüzü modülü: Size yeni imleçler, eylemlere yanıtlar, gerekli alanlar ve hatta öğeleri yeniden boyutlandırma sağlar.
  • Medya sorguları: Ortam 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 avuç içi cihazlar için olan 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ı Ortam modülü: Sayfalanmış ortam (kağıt, asetat vb.) İçin daha da fazla destek için.
  • Oluşturulan içerik: Başlıklar ve altbilgiler, dipnotlar ve özellikle disk belleği olan medya için programla oluşturulan diğer içerikleri çalıştırma.
  • CSS3 Konuşma modülü: İşitsel CSS’deki değişiklikler.