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.

Onur Dayıbaşı

Published in

Frontend Development With JS

8 min readSep 19, 2019

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.

from (https://developer.mozilla.org/en-US/)

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 ?

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow

CSS Parse edildikten sonra Attachment kısmında StyleCalculation ile RenderTree oluşturulur.

https://developers.google.com/web/updates/2018/09/inside-browser-part3 (Style Calculation)

Ö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)

Chrome Dev Tool (DOM Tree, Style, Computed)

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ı

https://developers.google.com/web/updates/2018/09/inside-browser-part3 (Layout Ağacı)

Paint aşamasında z-index göre menu, popup veya modal bileşenlerini önde çizme işlemini gerçekleştirir.

https://developers.google.com/web/updates/2018/09/inside-browser-part3 (Paint Records)

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.

https://tympanus.net/codrops/css_reference/#section_css-property

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.

https://tympanus.net/codrops/css_reference/#section_css-data-type

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.

https://tympanus.net/codrops/css_reference/#section_css-function ve (https://developer.mozilla.org/en-US/)

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.

https://tympanus.net/codrops/css_reference/display/

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.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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.

https://www.w3schools.com/css/css_grid.asp

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ı

Large / Medium / Small Screen Column Design

Media Query sadece ekran değil print, ve speech üzerinde de algılayabiliriz.

Other Media Types and Media Features For Media Query

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

https://tympanus.net/codrops/css_reference

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.

https://tympanus.net/codrops/css_reference/#section_css-function

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.