Shorthand CSS Özellikleri Kullanımı

Shorthand CSS özellikleri, CSS’de bazı özellikleri tek bir özellik içinde birleştirmek için kullanılır. Böylece ilgili CSS kodları, kod satırı (LOC = Line of Code) azaldığı için daha kısa ve daha okunaklı hale gelir. Bu aynı zamanda sayfanın daha da hızlı yüklenmesini sağlar.

Shorthand CSS Özellikleri

Özellikle CSS öğrenmeye yeni başlayanların çeşitli kodları analiz ederken kısa yazılmış CSS özellikleri kafa karışıklığına yol açabilmesi nedeniyle öncelikli olarak bu konunun öğrenilmesi tavsiye edilmektedir.

CSS özelliklerinin kısa yazımında ilgili özelliğe ait pek çok değer tek satırda yazılmaktadır. Ancak değerler arasına virgül koyulmadığına dikkat ediniz.

Uzun ve kısa yazımları olan CSS özelliklerinden yaygın kullanılanları kabaca aşağıda gibidir:

1. Background
2. Font
3. Border
4. Outline
5. Margin
6. Padding
7. List
8. Transition

Background Properties (Arkaplan Özellikleri)

⭐ Uzun yazımı (Longhand way)

background-color: #000;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: 10px 50px;
background-attachment: fixed;

⭐ Kısa yazımı (Shorthand way)

background:
#000
url (image.png)
no-repeat
10px 50px
fixed;

Ya da tek satırda aşağıdaki gibi yazabiliriz:

background: #fff url(image.png) no-repeat 10px 50px fixed;

Font Properties (Arkaplan Özellikleri)

⭐ Uzun yazımı (Longhand way); font özellikleri için örnek bir yazım aşağıda derlenmiştir:

font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

⭐ Kısa yazımı (Shorthand way)

font: italic bold 0.8em 1.2 Arial, sans-serif;

Border Properties (Kenarlık Özellikleri)

⭐ Uzun yazımı (Longhand way); border özellikleri için örnek bir yazım aşağıda derlenmiştir:

border-width: 2px;
border-style: solid;
border-color: #000;

⭐ Kısa yazımı (Shorthand way)

border: 1px solid #000;

Margin Properties (Dış Boşluk Özellikleri)

⭐ Uzun yazımı (Longhand way); margin özellikleri için örnek bir yazım aşağıda derlenmiştir:

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

⭐ Kısa yazımı (Shorthand way)

margin: 10px 10px 10px 10px;

Padding Properties (İç Boşluk Özellikleri)

⭐ Uzun yazımı (Longhand way); padding özellikleri için örnek bir yazım aşağıda derlenmiştir:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

⭐ Kısa yazımı (Shorthand way)

padding: 10px 10px 10px 10px;

Outline Properties (Dış Çizgi Özellikleri)

⭐ Uzun yazımı (Longhand way); outline özellikleri için örnek bir yazım aşağıda derlenmiştir:

outline-width: 3px;
outline-style: dotted;
outline-color: gray;

⭐ Kısa yazımı (Shorthand way)

outline: 3px dotted gray;

List Properties (Liste Özellikleri)

⭐ Uzun yazımı (Longhand way); liste özellikleri için örnek bir yazım aşağıda derlenmiştir:

list-style-type: square;
list-style-position: inside;
list-style-image: url(image.png);

⭐ Kısa yazımı (Shorthand way)

list-style: square inside url(image.png);

Transition Properties (Geçiş Özellikleri)

⭐ Uzun yazımı (Longhand way); transition özellikleri için örnek bir yazım aşağıda derlenmiştir:

transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 2s;

⭐ Kısa yazımı (Shorthand way)

transition: 1s all ease 2s;

Flex Properties (Fleks Özellikleri)

⭐ Uzun yazımı (Longhand way); flex özellikleri için örnek bir yazım aşağıda derlenmiştir:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;

⭐ Kısa yazımı (Shorthand way)

flex: 0 0 50%;