CSS3'teki önemli değişiklikleri anlama
CSS2 ile CSS3 arasındaki en büyük fark, CSS3'ün modüller denilen farklı bölümlere ayrılmasıdır. Bu modüllerin her biri, W3C'den öneri sürecinin çeşitli aşamalarında ilerlemektedir. Bu işlem, çeşitli CSS3 parçalarının farklı üreticiler tarafından tarayıcıda kabul edilmesine ve uygulanmasına çok daha kolay hale getirdi.
Eğer bu süreci CSS2 ile olanla karşılaştırırsanız, her şeyin içinde bulunan tüm Basamaklı Stil Sayfaları ile tek bir belge olarak sunulması durumunda, tavsiyeyi daha küçük, bireysel parçalara ayırmanın avantajlarını görmeye başlarsınız. Modüllerin her biri ayrı ayrı çalıştığı için, CSS3 modülleri için çok daha geniş bir tarayıcı desteğine sahibiz.
Yeni ve değişen herhangi bir spesifikasyonda olduğu gibi, CSS3 sayfalarınızı mümkün olduğunca çok tarayıcıda ve işletim sisteminde test ettiğinizden emin olun. Hedefin, her tarayıcıda tam olarak aynı görünen web sayfaları oluşturmamak olduğunu, ancak CSS3 stilleri de dahil olmak üzere kullandığınız stillerin, bunları destekleyen tarayıcılarda harika görünmesini ve eski tarayıcılar için incelikli bir şekilde geriye doğru düştüğünden emin olmanız gerektiğini unutmayın. yapma.
Yeni CSS3 Seçiciler
CSS3, yeni CSS seçicilerinin yanı sıra yeni bir birleştirici ve bazı yeni sözde öğelerle CSS kuralları yazabileceğiniz bir dizi yeni yol sunar.
Üç yeni özellik seçicisi:
- Özellik başlangıçta tam olarak eşleşir [foo ^ = "bar"] Öğe, "bar" ile başlayan foo adında bir özniteliğe sahiptir.
- Sonlandırma bitiş, tam olarak eşleşir [foo $ = "bar"] Öğe, "bar" ile biten foo adında bir özniteliğe sahiptir.
- Özellik, [foo * = "bar"] eşleme öğesini içerir . Öğe, "çubuk" dizesini içeren foo adlı bir özniteliğe sahiptir.
16 yeni sözde sınıflar:
- :kök
- Belgenin kök öğesi. HTML'de bu her zaman.
- : inci-çocuk (n)
- Tam alt öğeleri eşleştirmek için bunları kullanın veya alternatif eşleşmeler elde etmek için değişkenleri kullanın.
- : nth-son-çocuk (n)
- Son çocuktan sayılan tam çocuk öğelerini eşleştirin.
- : n-inci-of-tipi (n)
- Kardeş öğelerini belge ağacında aynı adla eşleştirin.
- : n-inci-son bir tipi, (n)
- Aynı adla eşleşen kardeş öğeleri alttan sayma.
- : Geçen-çocuk
- Ebeveynin son çocuk elemanını eşleştirin.
- : birinci tip
- Bu türün ilk kardeş elemanını eşleştirin.
- : son-tipi
- Bu türün son kardeş öğelerini eşleştirin.
- : Sadece çocuk
- Ebeveyninin tek çocuğu olan öğeyle eşleş.
- : Yalnızca-tipi
- Türünün yalnızca bir elemanı olan öğeyle eşleştirin.
- :boş
- Çocuğu olmayan öğeyi (metin düğümleri dahil) eşleştirin.
- :hedef
- Yönlendiren URI'nin hedefi olan bir öğeyle eşleştirin.
- : etkin
- Etkinleştirildiğinde öğeyle eşleştirin.
- : devre dışı
- Öğeyi devre dışıyken eşleştirin.
- :kontrol
- Öğeyi kontrol edildiğinde eşleştirin (radyo düğmesi veya onay kutusu).
- : değil (lar)
- Öğe basit seçici ile uyuşmadığında eşleşme s.
Yeni bir birleştirici:
- elementA ~ elementB
- ElementB, elementA'dan sonra bir yer izlerse, hemen değil.
Yeni özellikler
CSS3 ayrıca bir dizi yeni CSS özelliğini de tanıttı. Bu özelliklerin birçoğu, Photoshop gibi bir grafik programıyla daha fazla ilişkilendirilebilecek görsel stiller oluşturmaktı. Bunların bir kısmı, sınır yarıçapı veya kutu gölgesi gibi, CSS3'ün tanıtımından beri etrafta. Flexbox veya 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ı şekillendirmenize yardımcı olabilecek bir dizi yeni stil özelliği vardır.
Birden Fazla Arkaplan Ben mages
Arka plan resmi, arka plan konumu ve arka plan tekrar stillerini kullanarak, kutuda birbirinin üzerine katlanacak olan birden fazla arka plan görüntüsü belirtebilirsiniz. İlk görüntü kullanıcıya en yakın olan katmandır. Arka plan rengi varsa, tüm görüntü katmanlarının altına boyanır.
Yeni Arkaplan Stili Özellikleri
CSS3'te bazı yeni arka plan özellikleri de vardır.
- Arka plan-klip
- Bu özellik, arka plan görüntüsünün nasıl kırpılacağını tanımlar. Varsayılan sınır kutusu, ancak dolgu kutusuna veya içerik kutusuna değiştirilebilir.
- background-origin
- Bu özellik, arka planın dolgu kutusunda, kenarlık kutusunda veya içerik kutusunda yer alması gerekip gerekmediğini belirler.
- Arka plan boyutlu
- Bu özellik, arka plan resminin boyutunu belirtmenizi sağlar. Bu sayfaya sığdırmak için daha küçük görüntüler germek için izin verir.
Mevcut Arka Plan Stili Özelliklerinde Değişiklikler
Mevcut arka plan stili özelliklerinde de birkaç değişiklik vardır:
- background-repeat
- Bu özellik için iki yeni değer vardır: boşluk ve yuvarlak. Boşluk, kiremitli görüntüyü klipslenmeden kutu içinde eşit olarak yerleştirir. Yuvarlak, arka plan resmini yeniden boyutlandırır, böylece kutuda bir kaç kez döşenir.
- background-attachment
- Yeni bir "yerel" değeri eklenir, böylece bu öğe bir kaydırma çubuğuna sahip olduğunda arka plan öğenin içeriği ile kayar.
- arka fon
- Arka plan kısayol özelliği, boyut ve kaynak özelliklerine ekler.
CSS3 Sınır Özellikleri
CSS3 sınırları içinde, kullandığımız stiller (katı, çift, kesikli vb.) Olabilir veya bir resim olabilir. Artı, CSS3 yuvarlak köşeler oluşturma yeteneğini getiriyor. Kenarlık görüntüleri ilginçtir çünkü dört sınırın bir görüntüsünü oluşturursunuz ve ardından CSS'ye bu görüntüyü kenarlıklarınıza nasıl uygulayacağınızı söyleyin.
Yeni Kenarlık Stili Özellikleri
CSS3'te bazı yeni sınır özellikleri var:
- border-radius
- kenarlık üstü sağ yarıçap , kenarlık-alt-sağ yarıçap , kenar-alt-sol yarıçap , kenar-üst-yarı-yarıçap
- Bu özellikler, sınırlarınızda yuvarlatılmış köşeler oluşturmanıza izin verir.
- border-image-source
- Önceden tanımlanmış kenarlık stilleri yerine kullanılacak resim kaynak dosyasını belirtir.
- border-image-dilim
- Kenarlık görüntü kenarlarından içe doğru geçişleri temsil eder
- Çerçeve-görüntü genişliği
- Kenarlık resminizin genişliğinin değerini tanımlar.
- border-image-outset
- Kenarlık görüntü alanının kenarlık kutusunun ötesine uzandığını belirtir.
- border-image-streç
- 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.
- border-image
- Tüm kenarlık resmi özellikleri için kısayol özelliği.
Kenarlıklar ve Arka Planlarla İlgili Ek CSS3 Özellikleri
Bir sayfa kesildiğinde bir kutu bozulduğunda, satır sonu için satır sonu (satır içi öğeler için) kutu-dekorasyon-break özelliği, yeni kutuların kenarlık ve dolgu ile nasıl sarılacağını tanımlar. Arka planlar bu özelliği kullanarak çoklu kırık kutular arasında bölünebilir.
Ayrıca kutu elemanlarına gölgeler eklemek için kullanılabilecek bir kutu gölgesi özelliği de vardır.
CSS3 ile artık tablolar veya karmaşık div etiketi yapıları olmadan birden çok sütun içeren bir Web sayfasını kolayca oluşturabilirsiniz. Sadece tarayıcıya vücut elemanının kaç tane sütun içermesi gerektiğini ve ne kadar geniş olması gerektiğini söylersiniz. Ayrıca, sütunların yüksekliğini kapsayan sınırlar (kurallar), arka plan renkleri ekleyebilir ve metniniz otomatik olarak tüm sütunlardan akacaktır.
CSS3 Sütunları - Sütunların Sayı 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 genişliğini tanımlar. Tarayıcı, alanı geniş olan sütunlarla doldurmak için metni akacaktır.
- sütun sayısı
- Sayfadaki sütun sayısını tanımlar. Tarayıcı, alana sığacak kadar geniş sütunlar oluşturacak, ancak yalnızca belirttiğiniz numarayı oluşturacak.
- sütunlar
- Genişliği veya sayıyı (ya da her ikisini de tanımlayabilirsiniz, ancak bu nadiren anlamlıdır) tanımlayabileceğiniz kısa yollu özellik.
CSS3 Sütun Boşlukları ve Kuralları
Boşluklar ve kurallar, aynı çok loblu senaryodaki sütunlar arasında yerleştirilir. Boşluklar sütunları birbirinden ayırır, ancak kurallar herhangi bir yer kaplamaz. Bir sütun kuralı, boşluktan daha genişse, bitişik sütunlarla çakışır. sütun kuralları ve boşlukları için beş yeni özellik var:
- kolon boşluğu
- Sütunlar arasındaki boşlukların genişliğini tanımlar.
- sütun kural renkli
- Kuralın rengini tanımlar.
- sütun kural tarzı
- Kuralın stilini tanımlar (katı, noktalı, çift, vb.).
- sütun kural genişliği
- Kuralın genişliğini tanımlar.
- kolon-kural
- Bir kerede üç sütun kuralı özelliklerini tanımlayan bir shorthand özelliği.
CSS3 Sütun Sonları, Kapanış Sütunları ve Dolgu Sütunları
Sütun kesmeleri , disk belleğine alınmış içerikteki aralıkları tanımlamak için kullanılan aynı CSS2 seçeneklerini kullanır, ancak üç yeni özelliği vardır: break-before , break-after ve break-inside .
Tablolarda olduğu gibi, öğeleri sütun aralığı özelliğiyle sütunlara genişletecek şekilde ayarlayabilirsiniz. Bu, bir gazete gibi birden çok sütuna yayılan başlıklar oluşturmanıza olanak tanır.
Dolgu sütunları, her sütunda ne kadar içeriğe sahip olacağına karar verir. Dengeli sütunlar, her bir sütuna aynı miktarda içerik koymaya çalışırken otomatik, içeriği yalnızca sütun doluncaya kadar içeri akar ve ardından bir sonrakine gider.
CSS3'te CSS2'ye Dahil Olan Daha Fazla Özellikler
CSS3'te CSS2'de bulunmayan birçok ek özellik vardır:
- CSS Şablon düzeni modülü ve CSS3 Izgara konumlandırma modülü : CSS ile ızgara oluşturma.
- CSS3 Metin modülü : Metni çizin ve hatta CSS ile gölgeler oluşturun.
- CSS3 Renk modülü : Şimdi opaklıkla.
- Kutu modelindeki değişiklikler : IE etiketi gibi davranan bir seçim bölgesi özelliği dahil.
- CSS3 Kullanıcı Arabirimi modülü : Size yeni imleçler, eylemlere yanıtlar, gerekli alanlar ve hatta yeniden boyutlandırma öğeleri vermek .
- Medya Sorguları : Medya sorguları, bir stil sayfasının nasıl kullanılacağını tanımlarken daha fazla esneklik sağlar. Örneğin, yalnızca 20em'den daha büyük bir görünüm alanına sahip elde taşınabilir cihazlar için bir stil sayfası tanımlayabilirsiniz.
- CSS3 Ruby modülü : Belge ek açıklamaları için metin yakut kullanan diller için destek sağlar.
- CSS3 Paged Media modülü : Disk belleği olan ortamlar için daha fazla destek (kağıt, asetat, vb.).
- Oluşturulan içerik : Özellikle disk belleği olan ortamlar için programlı olarak oluşturulan üstbilgileri ve altbilgileri, dipnotları ve diğer içeriği çalıştıran L.
- CSS3 Konuşma modülü : Sesli CSS'de değişiklikler.