CSS Shorthand Ve Kullanımı

Shorthand CSS Nedir?

Shorthand CSS, stil dosyaları yazılırken CSS elementlerinin minimum kod ile oluşturulmasıdır.

Longhand CSS Nedir?

Longhand CSS, stil dosyaları yazılırken CSS elementlerinin uzun uzun kodlarla oluşturulmasıdır.

Kısaltılmış CSS ve Uzunltılmış CSS

Shorthand CSS kullanımında yük sayısı azaltılır ve tarayıcının yükleyeceği yük sayısı da azalacağı için performansa olumlu yönde katkısı olur.

Evet, background-size gibi bazı özellikler shorthand (kısayol) içerisinde doğrudan kullanılamıyor, çünkü shorthand yapısının kendisi zaten birçok özelliği bir araya getiriyor. Shorthand kullanımlarında her özelliği doğru sırada ve biçimde eklemek gerekir. Aşağıda, CSS'de yaygın kullanılan shorthand özellikleri ve bunların kısa Örnekleriyle birlikte açıklamalı bir liste bulacaksınız.

1- Arka Plan Yapıcılar (Background Shorthand)

Kullanılabilen Özellikler:

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin

Örnek Shorthand Kullanımı:

		div { background: url("image.jpg") no-repeat center / cover, #ff0000; }

Bu Örnek, background-image, background-repeat, background-position, background-size, ve background-color özelliklerini bir arada kullanır. Thank you ishadeed.com

---

<h3> 2- Kenarlık Yapıcılar (Border Shorthand)</h3> Genişlik, Sitil, Renk <p> Kullanılabilen Özellikler:</p> <ul> <li>border-width</li> <li>border-style</li> <li>border-color</li> </ul>	p {   border: 5px solid red; }	Örnek : Border Gürünümü
	p {   border-left: 6px solid red; }	Bu şekilde: Görünür
	p {   border-bottom: 6px solid red; }	Bu şekilde Görünür

Örnek Shorthand Kullanımı:

		div { border: 2px solid #000; }

Bu, kenarlık genişliğini (border-width), stilini (border-style), ve rengini (border-color) tek satırda belirtir. Bu koda ek olarak alttaki resimden uygulamalı ve açıklamalı halini görüyoruz.

---

3- Yazı Tipi Yapıcılar (Font Shorthand)

Kullanılabilen Özellikler:

• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family

Örnek Shorthand Kullanımı:

		p { font: italic small-caps bold 16px/1.5 Arial, sans-serif; }

Bu, yazı tipi stili, varyantı, kalınlığı, boyutu, satır yüksekliği ve yazı tipi ailesini birleştirir.

---

4- Liste Stili Yapıcılar (List Style Shorthand)

<p> Kullanılabilen Özellikler:</p> <ul> <li>list-style-type</li> <li>list-style-position</li> <li>list-style-image</li> </ul>

<ul> <li>Pasta</li> <li>Böğrek</li> <li>Ayran</li> </ul>

Pasta Böğrek Ayran

Örnek Shorthand Kullanımı:

		ul { list-style: circle inside url("bullet.png"); }

Bu, liste stili türü (list-style-type), pozisyonu (list-style-position), ve resmini (list-style-image) bir araya getirir.

---

5- Margin/Padding Yapıcılar (Margin ve Padding Shorthand)

Kullanılabilen Özellikler:

• margin-top, margin-right, margin-bottom, margin-left
• padding-top, padding-right, padding-bottom, padding-left

Örnek Shorthand Kullanımı:

		div { margin: 10px 20px 30px 40px; padding: 5px; }

margin ve padding shorthand kullanımı sırasıyla dört farklı kenara (üst, sağ, alt, sol) uygulanır.

---

6- Fleks Kutu Yapıcılar (Flex Shorthand)

Kullanılabilen Özellikler:

• flex-grow
• flex-shrink
• flex-basis

Örnek Shorthand Kullanımı:

		div { flex: 1 1 auto; }

Bu shorthand, esneme (flex-grow), daralma (flex-shrink), ve temel boyut (flex-basis) özelliklerini birleştirir.

---

7- Geçiş Yapıcılar (Transition Shorthand)

Kullanılabilen Özellikler: list-style-type list-style-position list-style-image

transition: Bir CSS özelliğinde bir değişiklik olduğunda bu değişimin süresini ve şeklini belirler. all: Tüm stil değişiklikleri için geçerlidir. (Örneğin, renk, boyut, pozisyon gibi). 0.3s: Geçişin ne kadar süreceğini belirler. Bu durumda 0.3 saniye sürecek. ease-in-out: Geçişin başında ve sonunda yavaşlamasını sağlar. Bu örnekte, düğmenin üzerine geldiğinizde rengin mavi yerine yavaşça yeşile dönüştüğünü göreceksiniz.

Örnek Shorthand Kullanımı:

		div { transition: all 0.3s ease-in-out; }

Bu shorthand, hangi özelliğin geçiş yapacağını (transition-property), süresini (transition-duration), zamanlamasını (transition-timing-function), ve gecikmesini (transition-delay) tanımlar. Alttaki kod bilmeyenler için transition örneğidir.

---

8- Animasyon Yapıcılar (Animation Shorthand)

Kullanılabilen Özellikler: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state	Bu kodda, div öğesi yatay olarak sağa doğru kayar ve ardından geri döner. Animasyon 2 saniye sürer, 1 saniyelik bir gecikme ile başlar ve sonsuz olarak devam eder.

Örnek Shorthand Kullanımı:

		div { animation: slideIn 2s ease-in 1s infinite alternate both; }

Bu shorthand animasyon ismi (animation-name), süresi (animation-duration), zamanlaması (animation-timing-function), gecikmesi (animation-delay), ve diğer özellikleri birleştirir.

---

9- Çerçeve Yapıcılar (Outline Shorthand)

Kullanılabilen Özellikler: outline-width outline-style outline-color p.br1 {outline: dashed;} p.br2 {outline: dotted green;} p.br3 {outline: 5px solid yellow;} p.br4 {outline: thick ridge pink;}

Border Kullanım Şekli A dashed outline. A dotted red outline. A 5px solid yellow outline. A thick ridge pink outline.

Örnek Shorthand Kullanımı:

		div { outline: 2px dotted red; }

Bu, çerçeve genişliğini (outline-width), stilini (outline-style), ve rengini (outline-color) birleştirir.

---

10- Kutu Gölgesi Yapıcılar (Box Shadow Shorthand)

Kullanılabilen Özellikler: offset-x offset-y blur-radius spread-radius color ---------------------------------
	Bu örnekte: 10px yatay gölge, 10px dikey gölge, 50px bulanıklık yarıçapı, 10px yayılma yarıçapı, rgba(0, 0, 0, 0.9) ise neredeyse tamamen siyah bir gölge oluşturuyor.

Örnek Shorthand Kullanımı:

		div { box-shadow: 10px 5px 5px 0px rgba(0, 0, 0, 0.5); }

Bu shorthand, gölgenin x ve y ofsetini, bulanıklığını ve yayılımını birleştirir.

---

Bu shorthand özellikleri, CSS kodlarını daha kısa ve okunabilir hale getirmek için faydalıdır. Her bir shorthand kullanımı ilgili özellikleri birleştirerek daha temiz bir kod yazımı sağlar.