PostCSS-cssnext ile Geleceğin CSS’sine Başlayın

PostCSS-cssnext nesil CSS yazmak için bir plug-in paketidir. Bu makale, projenin geçmişi ve yararları hakkında bir fikir vermektedir. Ayrıca makalenin sonuna doğru PostCSS-cssnext ile gelecekteki CSS sözdiziminde usta olabilir ve önümüzdeki (veya mevcut) bir projede kullanmak istediğiniz şey olup olmadığına karar verebilirsiniz!

Yeni Nesil CSS İhtiyacı

Dil ne olursa olsun, geliştiriciler daima en yeni özelliklerin peşindedirler. Babel gibi araçlar JavaScript geliştiricilerine gelecekteki ECMAScript özelliklerini desteklerken, PostCSS-cssnext web tasarımcılarına gelecekteki CSS özelliklerini sunar. Şu anda bu CSS değişkenleri, iç içe yerleştirme ve daha fazlası gibi CSS4 ile ilgili özelliklere destek sunmak anlamına gelmektedir. Şimdi, ilerlemeden önce gelecekteki CSS özelliklerinin değişebileceğini ve CSS4 spesifikasyonunun bu açıdan farklı olmadığını belirtmek isterim. Bununla birlikte, PostCSS-cssnext, meydana gelmek üzere olan değişiklikleri önceden kullanıcılara bildirerek bir projede meydana gelebilecek olumsuz etkileri hafifletir. 

Cssnext’den PostCSS-cssnext’e

Başlangıçta, “cssnext”, kodu küçültme ve hata iletileri görüntüleme gibi görevleri yerine getirmek içindir. Bu yetenekler faydalıydı ancak PostCSS-cssnext projesinin nihai hedefi olan gelecek CSS özelliklerini desteklemedi. Bunun bir sonucu olarak cssnext ekibi, cssnext fikrini bağımsız bir araç olarak terk etmeye karar verdi. Bunun nedeni olarak, destekleyen harcamaların gelecekteki CSS sözdizimini ve sonraki değişikliklerin herhangi birinin desteklenmesinde daha iyi harcanabileceği idi. CSS ile ilgili ek işlemler için, geliştiriciler PostCSS-cssnext’i kod minimizasyonu için cssnano ve hata raporlama için postcss-browser-reporter gibi diğer teknolojilerle bütünleştirebilirler.

PostCSS-cssnext’in İncelenmesi

GitHub’daki PostCSS-cssnext eski defterleri incelersek, bu eklentinin modüler olduğunu görebiliriz. src / features.js dosyasının içinde gelecek her CSS özelliği için kodun, ilgili CSS belirtimine uygun olarak adlandırılan kendi modülünün içine alındığını göreceğiz. 

Eklenti paketi olduğundan, PostCSS-cssnext PostCSS eklentileri ile birlikte gelir. Eğer bu seçeneği seçersek, biz tek tek bu özellikleri yüklememiz anlamına gelir fakat PostCSS-cssnext’i kullanma zorunluluğunun gerekmediği anlamına da gelmektedir. Örneğin, yalnızca CSS özelliklerini kullanmak istediysek, bunu npm ile kurabiliriz.

PostCSS-cssnext’in desteklediği tüm CSS özelliklerinin tam listesi için PostCSS-cssnext web sitesinde özel özellikler sayfasına gidin.

Ayrıca PostCSS-cssnext’in autoprefixer ve pixrem ile birlikte geldiğini de belirtmeliyiz. Bu araçlara aşina değilseniz endişelenmeyin.  Bunlar cross-browser uyumlu CSS oluşturmak için post-processorlerdir(Daha önce başka bir aygıt ya da program tarafından işlenmiş veriler üzerinde son işlemleri ya da düzenlemeleri yapan bilgisayar programı ya da aygıt) ve biz bunların nasıl çalıştığını bulacağız. 

PostCSS-cssnext Örneklerine Bir Bakış

Şimdi PostCSS’e ayrıntılı bir şekilde baktık, şimdi bazı örneklerle inceleyelim.

var() ile Özel Özellikleri Kullanma

Özel özellikler en popüler CSS özellikleri arasındadır. Tüm özel özelliklerin :root seçicisi ile sınırlı olduğunu unutmamak önemlidir.

@apply() ile Özel Özellikleri Kullanma

@apply ile, bir dizi daha ileri ve referans veri kümeleri ile var () özel özelliklerini alabiliriz. Bunlar, bir grup stili tekrar tekrar yazmak zorunda kalmadan yeniden kullanmak istediğiniz durumlarda yararlıdır. Örneğimizde, bir düzen oluştururken bu özellikten nasıl yararlanabileceğimizi görüyoruz. 

Yukarıdaki CSS kuralları içinde :root seçicisi bir flex kabı tanımlar. Bu düzeni değiştirmek istersek, tek yapmanız gereken –flex-row içindeki tek bir değeri değiştirmektir ve bu değişiklik @apply ile birlikte –flex-satırı kullanıldığında geçerlilik kazanacaktır. 

Kodumuzdaki Hızlı Notumuz

Doğrudan yuvalanma(nesting) kullanımından bahsetmedim, ancak yukarıdaki örnekte kullanıldığını gördük(–flex-row özelliği :root seçicisinin içine yuvalanmıştır).  Nesting(İçiçe yerşeltirme) kavramına tamamen yeni olanlar için, CSS Yerleştirme Modülü Seviye 3 belgelerinde daha fazla bilgi okuyabilirsiniz. Adından da anlaşılacağı üzere, nesting, CSS kurallarını diğer CSS kuralları içine yerleştirmemizi sağlar. Çok uzatmadan bu gerçekten pratik bir özelliktir ve kontrol etmenizi öneririm.

Farkına varılamayan bir diğer güzel şey ise, tüm kodlarımızın cross-browser uyumlu olmasıdır! Daha önce öğrendiğimiz gibi, cssnext, autoprefixer ile birlikte gelmektedir. Bu derlenen CSS koduna tüm satıcı öneklerini otomatik olarak ekler.

İfadelerin Hesaplaması

Biz önceden var() fonksiyonunu göz atmıştık. Şimdi, calc fonksiyonu ile birlikte var özel niteliklerini nasıl kullanabileceğimizi öğrenelim. Örneğimizde, başlıklar için yazı tipi boyutlarını hesaplamak için calc () kullanacağız.

Burada, –font Size değişkeninin değerini çarpmak için calc () içine geçirildiğini görüyoruz. Çarpma işlemine ek olarak calc () bölme, çıkarma ve toplama işlemlerini gerçekleştirmek için de kullanılabilir.

Pixrem’in Gizli Güçleri

Kısa bir süre önce otomatik düzelticinin kodumuz üzerindeki etkisini belirttik. Satıcı ön eklerini eklemenin yanı sıra, PostCSS-cssnext eklenti paketi pixrem‘in yardımıyla rem birimler için de geri dönüş piksel değerlerini oluşturacaktır. Bu, rem’in desteklenmediği tarayıcılar için yapılır ve derlenmiş CSS’mizi yukarıdaki demoda analiz edersek başlıklarımızın artık hem piksel hem de rem değeri olduğunu görürüz ve böylece tarayıcılar arası uyumluluk sağlanır.

Özel Medya Sorguları

Mobil web kullanımı muzzam; bu da duyarlı tasarımın her zamankinden daha önemli olduğu anlamına gelmektedir. Medya sorguları oluşturma sürecini basitleştirmek için bir takım planlı değişiklikler var.

İlk medya sorgumuzda, @custom-media‘nın özel bir medya sorgusu oluşturmak için kullanıldığını görüyoruz. Bunu yaptıktan sonra breakpoint’imizi oluşturmak için medya sorgumuzun adını @media () kuralına geçirebiliriz. 

Medya Sorgu Aralıkları

Medya sorguları yazarken, PostCSS-cssnext, medya sorgu aralıklarını tanımlamamıza izin vererek kodumuzla daha özlü olmasını sağlar. Bu, >, < ve = operatörleri ile maks, min ve eşit değerleri değiştirebileceğimiz anlamına gelir. Küçük olmasına rağmen, bu semboller daha hızlı gelişme ve kodun okunmasını kolaylaştırır.

Yukarıdaki snippet’de –medium-viewport medya sorgusunun kodu bulunmaktadır. Görüntüleme alanını 600 pikselden küçük olacak şekilde yeniden boyutlandırırsak, bir önceki örnekteki küçük ekranlar için medya sorgusu etkinleşir yani flex-direction sütunu ayarlanacak ve arka plan rengi Rebecca mor olacaktır. Sayfa, 600 pikselden geniş veya ona eşit olan ekranlarda 1280 piksellik genişliğe kadar ekranlarda görüntülendiğinde, flex-direction özelliği, varsayılan satır değerine geri dönecek ve arka plan rengi Teal olacaktır. 

Arkadaşlar yazımızın sonuna gelmiş olduk. Yazı hakkında görüş ve düşücelerinizi yorum alanına belirtirseniz sevinirim. Bir sonraki yazıda görüşmek dileğiyle. Esen kalın 😉