Selamlar, son 5 günümü kod yazmadan dizi ve film izleyerek geçirdim ve vicdanımı biraz olsun hafifletmek için bir şeyler karalamaya karar verdim, umarım aradığınız bazı özellikleri bulursunuz Bu konuda CSS üzerinde kullanabileceğiniz bazı özellikleri paylaşacağım.

-webkit-line-clamp (özellik/property)
R10'un webmaster platformu olduğunu düşünürsek burada bulunan hemen hemen herkes CSS üzerinde çalışma yapmıştır. Peki hiç CSS ile yapabileceğiniz bir işlemi back-end ile yaptığınız oldu mu? Mesela blog sitemiz var, ana sayfamızda blog paylaşımlarımızı listeliyoruz, paylaşımımız hakkında bilgilendirme yapmak için kısa bilgi vermek yerine direkt olarak paylaşımın içeriğini çektik. Peki bu paylaşım 500 satırdan ya da yüzlerce karakterden oluşuyorsa ne yaparız? Back-end'i PHP ile yazdığımızı varsayarsak muhtemelen substr fonksiyonu ile karakter limiti belirleyip trimleriz sonuna da üç nokta ekleriz. Ancak bu işlemi front-end'de daha dinamik ve basit biçimde yapabilirdik, tıpkı alttaki örnekte olduğu gibi.



Burada kilit noktamız -webkit-line-clamp özelliğidir, bu özellik element içeriğinin maksimum kaç satır olacağını belirlememizi sağlar. Display özelliğine -webkit-box değeri vererek bu elementin bir webkit kutucuğu olduğunu belirledik, -webkit-box-orient ile kutu içeriğinin yönünü dikey olarak ayarladık, -webkit-line-clamp ile satır limiti verdik ve overflow hidden kullanarak taşan(2. satırdan sonrası) içeriği gizledik.
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
Clamp (fonksiyon)
Diyelim ki blog sitemizi geliştirdik artık tüm sayfalarda görüntülenen bir duyuru kutucuğumuz var, peki bunun genişliğini(width) media query ile uğraşmadan direkt belirleyebilir miyiz? Elbette, işte karşınızda size zaman kazandıracak mükemmel bir fonksiyon





Clamp fonksiyonu font-size gibi birçok özellikle beraber kullanılabilir, burada dikkat etmemiz gereken şey clamp fonksiyonuna 3 argüman verebilmemizdir. İlk argüman minimum değer, ikinci argüman varsayılan değer ve üçüncü argüman maksimum değeri temsil eder. Mesela ben örnekte minimum 100px, varsayılan olarak 50%(kapsayıcı elementin genişliğinin yarısı kadar) ve maksimum 450px değer verdim. Gördüğünüz gibi ekran ne kadar büyürse büyüsün kutucuk 450px'i geçmedi, küçüldüğü zaman da 100px'in altına inmedi.
İpucu: İlkel teknolojiye sahipsek, evimiz ya da mağaramızda elimizdeki 50px'lik cihaz ile surf yaparken bu sayfaya girersek duyuru kutucuğu ekranın görünmeyen tarafına doğru taştığını görürüz, bu yüzden genel olarak gerekmedikçe kapsayıcı elementlere overflow-x hidden vermemeliyiz. Bunun yerine media query'de yer vererek overflow'a auto değerini atarız, scrollbar'ı gerektiğinde göstermiş oluruz gerekmediğinde gizlemiş oluruz 
div.wrapper{
  width: clamp(100px, 50%, 450px);
}
Calc (fonksiyon)
Bu fonksiyonu mutlaka kullanmış, görmüş veya duymuş olabilirsiniz. Tam bir hayat kurtarıcıdır, CSS'in matematik hocasıdır. Bu fonksiyon sayesinde CSS kodlarımızda matematiksel işlemler yaparız, kısa ve öz!



Mesela burada 400px - 200px işlemini yaptım ve sonuç 200px çıktı, sizce de matematik dersinden 100'ü hak etmiyor mu Tabi ki bu fonksiyonu böyle aşağılarcasına kullanmıyoruz. Bazen px yerine %,vw,vh,vmin,vmax,cm,in,pt, vov.(var oğlu var) gibi ölçü birimlerini kodlarımıza dahil ederiz, bu durumlarda bir şeyleri hesaplamamız gerekir. Mesela bir elementin genişliğini, pencere genişliğinin 100px azı kadarını yapacağız. Bu durumda width özelliğine calc(100vw - 100px) değerini girmemiz yeterli olacaktır.
div.wrapper{
  width: calc(400px - 200px);
}
Attr (fonksiyon)
"Adını" bilmeyenler için diyorum attribute(attr) tanımı size kesinlikle yabancı gelmesin, HTML kodu gören herkes mutlaka bir element üzerinde attribute ile karşılaşmıştır.
Örneğin <p id="wrapper" style="color:#fff" class="element" data-blabla="blabla" siuuu="süüü"> elementindeki id, style, class, data-blabla ve siuuu birer attribute'dir. Peki bunları CSS üzerinde kullanmak hem pratik hem havalı olmaz mıydı? Hadi yapalım!



HTML'deki title attrını bilirsiniz, imleci title attrı verilmiş bir elemente getirirsek gösterişsiz klasik bir kutucuk çıkar içerisinde de title attrına verilen değer yazar. Bu sahnede HTML'in title özelliğine alternatif bir tasarım hazırladık, kilit noktamız content: attr(data-desc) satırıdır. İmleci kapsayıcı elementin üzerine getirdiğimiz zaman 25px kadar altında bir kutucuğun içerisinde data-desc attrına verdiğimiz değer beliriyor. Her ne kadar göz alıcı olsa da bu fonksiyon henüz fazlasıyla kısıtlı durumda. Mesela background, color, display, position, vov. gibi özellikler için attr fonksiyonunu kullanamazsınız, bunun yerine değişkenleri kullanmanız gerekecek.
İpucu: CSS kodlarında gördüğünüz gibi div.wrapper[data-desc]:hover::before şeklinde 5 tane seçici kullanılmış. Bunun anlamı tam olarak "wrapper classına ve data-desc attribute'una sahip div elementlerine hover(imleci üzerine getirme) yapılırsa elementin kendisinden önce(before) ..." şeklindedir.
div.wrapper[data-desc]:hover::before{
  content: attr(data-desc);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f72585;
}
Var - Global Variables (global değişkenler ve kullanımı)
Göze hitap eden tasarımlar birbirine uyumlu sabit bir renk paleti üzerine inşa edilir, o halde bize de hiçbir "pratiklikten" ödün vermeyip göze hitap eden tasarımlar yapmak düşer. Mesela blog sitemizi dinamikleştirmeye devam etmek istiyoruz, gösterişli title attrı olan sitemize bir de dinamik renk paleti ekleyeceğiz. Basit bir tasarımda en az 100 defa tekrarlayan renk kodu kullandığımızı düşünürsek bunu dinamik hale getirmek tabiri caiz olsun olmasın belimizi direkt şaaak diye bükecektir. O zaman renklerimizde global değişkenleri kullanalım.



body'i html'i falan unutun :root CSS'in en baba seçicisidir, HTML'de tam anlamıyla sayfanın kendisini temsil eder. Global değişkenlerimizi burada tanımlarız, gördüğünüz gibi iki tane "--" ile başlar. Burada --primary değişkeni oluşturup #3a0ca3 değerini atadık daha sonra wrapper classına sahip div elementlerinin border rengine primary'i atadık. Burada dikkat ettiyseniz değişkeni kullanırken var() fonksiyonunu kullandık, değişkenlere erişmek için bu fonksiyonu kullanmamız gerekir. Diğerlerine de benzer işlemleri uygulayarak dinamik bir renk yapısı oluşturduk. Örnek üzerinden gidersek artık 3 satırlık kodda değişiklik yapıp bunun binlerce satıra etki etmesini sağlayabiliriz. Unutmayın, değişkenler sadece renklerle sınırlı değildir. CSS'in söz dizimi(syntax) dışına çıkmamak şartıyla istediğiniz değerleri atayabilirsiniz, px vererek boyutlandırma kullanmak gibi.
:root{
  --primary: #3a0ca3;
  --secondary: #3f37c9;
  --tertiary: #fff;
}
div.wrapper{
  border-color: var(--primary);
  background-color: var(--secondary);
  color: var(--tertiary);
}
Değişkenleri Kullanarak Dinamik Line-Clamp Oluşturmak



Burada iki farklı p etiketi var, kapsayıcı elementimiz line_clamp classına sahip herhangi bir element ve bu elementin elemanı olan tüm p elementleri 3 satır ile limitlendirilmiş. Dikkat ettiyseniz data-dynamic-clamp attrına sahip p etiketlerinde satır limiti --c değişkeni olarak belirtilmiş, bu değişkenin değerini de p etiketinde style attrını kullanarak belirledik. Yani bir değişken belirlemek için illa :root seçicisi içerisinde çalışmamız gerekmiyor ayrıca her etiket için de farklı değer verebiliriz.
.line_clamp p{
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
p[data-dynamic-clamp]{
  -webkit-line-clamp: var(--c);
}
Şimdi zurnanın zırt dediği yere gelirsek işin cross-browser tarafı var, bunları anlatmak yerine tek tek linklerini verdim bu özellikleri ve fonksiyonları kullanmadan önce kesinlikle araştırın.Eveeet benden şimdilik bu kadar R10 halkı, min() max() gibi fonksiyonlar da var ancak clamp fonksiyonu varken pek gerek kalmıyor. Bu konuda bir şeyler üretmekten çok işlerimizi pratikleştiren fonksiyonlara yer verdim, eğer konu bol bol ilgi görürse ilerleyen zamanlarda yeni çıkan seçiciler hakkında konu açmayı borç bilirim.