REACT UI STYLING
Kuş Bakışı CSS
CSS (Cascading Style Sheets)’i Web’de geliştirdiğimiz uygulamalarını renklendirmek, şekillendirmek veya ufak animasyonlar katmak için kullanıyoruz. Peki CSS Nedir ?, Ne işe yarar ? Nasıl Çalışır Bu yazıda kısaca bunlara değiniyor olacağım.
CSS’de bir Programlama dili Değil, HTML gibi Markup Dil’dir. Style Sheet Language (Style sheet Dilidir.). CSS HTML Elemanlarını Seçimli Şekilde Style uygular. Örn Tüm paragraf Elemanları kırmızı renkli olsun istersek aşağıdaki resimde olduğu gibi p elemanına kırmızı atamamız yeterli.
Bu yazıda CSS ile ilgili aşağıdaki konulara değineceğim.
- CSS Tarayıcılar Tarafından Nasıl Ele Alınır ?
- CSS Kural Anatomisi
- Selectors
- Metin
- CSS Box Model
- Layout
- Media Query
- Tablo
- Overflow
- Animation
Peki bu işlemi Chrome Nasıl gerçekleştiriyor. Bu konuyu detaylı Chrome Web Sayfasını Ekrana Nasıl Çizer ? yazısında anlatmıştım. Burada kısaca bahsedersek.
1. CSS Tarayıcılar Tarafından Nasıl Ele Alınır ?
CSS Parse edildikten sonra Attachment kısmında StyleCalculation ile RenderTree oluşturulur.
Örneğin Chrome DevTools açtığımızda Sol kısımda DOM Tree, Sag kısımda Style ve Computed kısmını görebilirsiniz. Style belli bir hiyerarşi ile işletilir. Elemandan, Class selector, Tag selector olacak şekilde (stilde !important vermişseniz bu öncelik değişebilir)
Daha sonra Layout ile bulunduğu cihazın ekran boyutlarına ve çözünürlüğüne ve bizim CSS’de ona verdiğimiz layoutlara yani display block, inline, flex, grid vb.. göre html içerisinde elemanları nasıl yerleştireceğine karar verir tarayıcı
Paint aşamasında z-index göre menu, popup veya modal bileşenlerini önde çizme işlemini gerçekleştirir.
Nihayet Composition ve Rasterization sonrasında ekranda stillendirilmiş bileşenlerimizi görmeye başlarız.
2. CSS Kural Anatomisi
CSS Kural Anatomisi aşağıdaki resimde olduğu gibi
- Selector ve Declaration kısmından oluşur.
- Declaration kısmıda içerisinde property : value içerir
Selector de çoklu olabilir yani farklı farklı türdeki elemanları seçebilmek için Multiple Element Selection yeteneği yada bir selector içerisinde Multiple Property Value tanımlanabilir.
2.1 Property
Property margin, padding, display, color vb.. CSS declaration sol kısmına yazdığımız sabit tanımlamalardır. CSS Property References bu linkten erişebilirsiniz.
2.2 Property Value
Property Value ise sol tarafta yazılan property göre değişkenlik gösterir. Örneğin cursor için aşağıdaki enumaration bir tanesini almak zorunda iken
Color benzeri yapılarda bazen hazır DataType’larıda kullanılabilir. Color enum indeksleri, RGB, RGBA, HLS, HSLA gibi modeller kullanabilirsiniz.
veya numeric değerler olan Height özelliğini ele aldığımızda buna değişik şekilde yüksekliği tanımlayabiliriz px olarak sabit, % ratio olarak veya calc fonksiyon ile hesaplama yapabiliriz. Font gibi yapılarda px yerine em kullanmak zoom-in ve zoom-out larda daha iyi sonuçlar almamızı sağlar. Print ise daha farklı ölçü birimleri kullanılabilir.
3. Selectors
Tanımladığınız CSS parçalarının hangi HTML elamanı veya elemanlarına uygulanacağını belirlemek için Selector kullanırız.
Bir HTML Elemenına birden fazla Selector etkiliyorsa önceliği aşağıdaki sıra şeklinde gerçekleşir.
- !important
- ID Selector
- Class Selector
- Element Selector
Yukarıdaki resimde farklı farklı CSS Selector yazabilme yeteneklerini görebilirsiniz.
- * → tüm elemanları seçer
- h1 → Element Selector
- a:link → Pseudo-class Selector
- .manythings → Class Selector
- #onething → ID Selector
- .box p → Class Selector > Element Selector çalıştırır.
- .box p : first-child → Class Selector > Element Selector > Pseudo -Class
- h1, h2, .intro → Multiple Selector
4. Metinler
HTML içerisinde Metinler çok önemli bir yer teşkil eder. Metinlerde ayarlama yapabileceğimiz metin üzerinden bazı yetenekler olduğu gibi bazıları daha derinde bu metnin yapısından gelen Font özellikleri içerisinde gelir. Aynı şekilde yazacağımızı metinlerde bu ortak tanımlamaları kullanırız.
Text is CSS Property aşağıda listelenmiştir.
- font: font
- color: RGB, HEX, HSL, Named colors
- text-align: center | left | right | justify (Extras: text-justify)
- text-decoration: overline | line-through |underline | none (Extras: text-decoration-color, text-decoration-style, text-decoration-line)
- text-transform: uppercase | lowercase | capitalize
- text-indent: the indentation of the first line
- letter-spacing: space between characters
- line-height: space between lines
- word-spacing: space between words
- text-overflow: clip|ellipsis| string;
- white-space: white-space: normal|nowrap|pre …
- word-break: normal|break-all|keep-all|break-word | ….
- word-wrap: normal|break-word|…
- writing-mode: horizontal-tb|vertical-rl|vertical-lr
Fontlar text oluşturan en önemli konulardan birisidir. Her bir property değişimi web sayfanızın kalitesini, ergonomisini ve okunabilirliğini arttırır veya azaltır. Bu nedenle Font property ve bunların etkilerini çok iyi biliyor ve uyguluyor olmanız önemlidir.
- font-family: Times New Roman, Georgia, serif → if the browser does not support first font-family settings then tries the second one and then tries next.
- @font-face: Custom font loading from local or server
- font-style: normal | italic | oblique
- font-size: {number} px | em | % | vw
- font-weight: normal | bold
- font-variant: normal | small-caps
- font-stretch: ultra-condensed | extra-condensed| condensed |…
- font-size-adjust:
- font-kerning: auto | normal | none
- -webkit-font-smoothing: none | auto | antialiased | subpixel-antialiased
- -moz-osx-font-smoothing: auto | grayscale
Color ışık yansımalarının gözünüzde oluşturduğu tetiklemelerle beyninize oluşan algılamalar sonucu olur. Bu durumu yansıtabilmek için farklı farklı renk modelleri bulunur.
- Named colors: red, green, blue, vb.
- Transparent Keyword: transparent
- 3 Digit, 4 Diget, 6 Digit, 8Digit Hex Colors: #FFBBAA
- rgb, rgba, hsl, hsla:
5. CSS Box Model
HTML’deki her element bir box modeli ile çevrelenir. Bu box modeli en dıştan içeriye doğru Margin, Border, Padding ve Content kutuları olacak şekilde birbirlerini çevreler.
Margin
En dıştaki katmana Margin denir. Diğer bileşenler ile arasındaki mesafeyi belirlemek için kullanılır.
Border
Bileşenimizin çevresini saran köşe veya sınır çizgileridir. Farklı farkı çizimler kullanarak farkı tasarımlar ortaya çıkarabilirsiniz.
Padding
Sınır çizgisi ile Content arasındaki boşluğu tanımlamanızı sağlar.
6. Layout
Her elemanın çevresinde bir BoxModel otomatik olarak oluşsada bu bileşenlerin ekrana nasıl çizileceği konusu belli değildir.
Bunun için CSS bize farklı farklı elemanları dizebilme imkanı sağlamıştır. display:none, inline, block, flex, grid ..
Display Inline
Bizim elemanları yan yana dizmek için kullandığımız bir layout tasarımıdır. span, img vb.. html elemanları default inline olarak kendisini tanımlar.
Display Block
Elemanların block block alt alta dizildiği yöntemdir. p, h, ul, div, section, header default display block olarak layout alırlar.
Flex Layout
React Bileşenleri yazarken en rahat şekilde üzerinde çalışabileceğiniz layout türüdür.
Grid Layout
Özellikle sayfa tasarımı , büyük alanları tasarlarken kullanağınız layout Grid Layout olmalıdır. Media Query birlikte size responsive ekran tasarlama imkanı sunar.
Gridlerde Gap Ayarlamaları yapabilir
Bootstrap , Tailwind, Ant css hazır 24 grid sistemlerinden faydalanabilirsiniz
7. Media Query
Hedef Tarayıcının üzerindeki Media özelliklerini algılayarak ona göre farklı css uygulanmasını sağlar (Responsive Design)
Media Query en çok ekran büyüklüğüne göre layout ayarlanmasında kullanılır. Column Tasarımı, Desktop farklı, Tabletlerde farklı, Telefonlarda farklı
Media Query sadece ekran değil print, ve speech üzerinde de algılayabiliriz.
8. Pseudo Elements ve Pseudo Class
İlgili html elementi ile ekstra durumlara veya özelliklere erişmek için CSS 2 nokta üst üste : bu özelliği erişmemizi sağlayan yapılardır.
Pseudo Elements
Pseudo Class
Örneğin aşağıdaki örnekte bir link hiç tıklanmamış ise a:link, tıklanmış ise a:visited, üzerine gelince a:hover, eğer link aktif ise a:active gibi özellikler ile bu linkin farkı durumlarını ele alabiliriz.
Pseudo Class Referanların hepsine aşağıdaki resimden erişebilirsiniz.
9. Overflow
Overflow ekranın görüntüsü içerisine içeriğin sığmadığı durumlarda bu görüntünün kırpılıp, kırpılmayacağı veya scroll çıkarılıp çıkarılmayacağına karar verilir. Farklı Overflow türleri;
10. Animation
CSS ile HTML elemanları üzerinde basit animasyonlar oluşturmanızı sağlar. Daha dinamik hareketler için JS kullanılabilir ama CSS’de içerisinde üzerinden animasyon ismi , süresi ve animasyonu genel bilgilerinden sonra keyframe içerisinde animasyon geçişlerini sağlayabiliriz.
Animasyon’da önemli olan from → to geçiş ve bu geçiş aralarında belli parametrelerin değiştirilmesidir. Aşağıda örnek animasyon kod tanımlamalarını görebilirsiniz.
Zıplayan bir Top (Bounce Ball) Animasyonu
Referanslar
- https://developer.mozilla.org/tr/docs/Web/CSS
- https://tympanus.net/codrops/css_reference/
- https://www.w3schools.com/css/default.asp
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.