CSS Kodlarını Sıkıştırma/Genişletme

CSS Kodlarını Sıkıştırma/Genişletme
CSS Kodlarını Sıkıştırma/Genişletme
Bu yazımda Css kodları nasıl sıkıştırılır veya tam tersi sıkıştırılmış Css kodları nasıl daha okunur hale getirilir adlı 2 konuya değindim. Detaylar için yazımı inceleyebilirsiniz.

Merhabalar,

Bu yazımda Css kodları nasıl sıkıştırılır veya tam tersi sıkıştırılmış Css kodları nasıl daha okunur hale getirilir adlı 2 konuya değineceğim. Öncelikle bu işlemleri neden yapalım gibi soru varsa aklınızda bunu cevaplayayım;

CSS Kodları Neden Sıkıştırılır ?

Şöyle ki Css kodlarındaki boşluk, tab gibi gereksiz yer kaplayan öğeler Css dosyasının boyutunu arttırır. Dosya boyutu yükseldikçe sitenin açılış hızını olumsuz yönde etkiler. Sıkıştırılmış bir Css dosyası her zaman yüklenme açısından size artı olacaktır. Tabii Bazı zaman kodların çalınmasını engellemek için de bu işlemi yapan kişiler de bulunmaktadır 🙂

Sıkıştırılmış CSS Kodları Neden Genişletilir ?

Cevap tabii ki daha okunabilir hale getirmek olacaktır. Düzenlemeleriniz boyunca sıkıştırılmamış olan Css dosyasında işlem yapabilirsiniz. Hatta sitenize bu şekilde de yükleyebilirsiniz sadece site hızınızı biraz olumsuz etkiler. Düzenlemeleriniz bittikten sonra tekrar sıkıştırıp sitenize yükleyebilirsiniz. Css kodlarını bu amaç için genişletebilirsiniz.

Bu işlemin amacını öğrendiyseniz gelin nasıl yapabileceğimize göz atalım;

Bir çok site ve uygulama bu işlem için mevcuttur. Ben benim en çok kullandığım hızlı kullanım, hemen sonuç ve özelleştirmeler gibi özelliklerinden dolayı kullandığım csscompressor.com sitesini sizlere tavsiye edeceğim.

Linke tıklayıp web sitesini ziyaret edin, adım adım açıklamaya çalışayım;

  1. Yukarıda belirttiğim gibi önce kodu belirtilen alana yapıştırıyorsunuz.
  2. Ardından zorluk seviyesini seçiyorsunuz
    • Highest: En sıkıştırılmış halidir haliyle en düşük boyut seçeneğidir. Okunabilirlik zayıftır.
    • High: Benim en çok kullandığım tiptir. Okunabilirlik normal, boyut küçüktür.
    • Standart: Okunabilirlik daha kolay, boyut ise normaldir.
    • Low: Sadece okunabilirlik üzerine vardır. En kolay okunabilirlik seviyesidir boyut haliyle büyüktür.
  3. Seviyeyi seçtikten sonra Compress butonuna tıklıyoruz. Ardından aşağıda seçtiğiniz seviyeye göre çıktıyı size vermektedir.

İşinize yarayacak pratik bir web sitesi olduğunu düşünüyorum. Şahsen sık kullandığım bir araç ve sitedir.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
CSS ::before, ::after
Devamını Oku

::before, ::after Kullanımı

CSS: before ve: after özellikleri, sözde öğeler olarak da bilinen özelliklerdir. Bir elemanın içeriğinden önce veya sonra bir şey eklemek için kullanılırlar. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku

Görseli Yuvarlak Yapma
Devamını Oku

Görseli Yuvarlak Yapma

Bu yazımda img etiketiyle eklenen bir görseli Css özelliği border-radius ile nasıl yuvarlak yapabiliriz bu konudan bahsettim. Detaylar için yazımın devamını okuyabilirsiniz.

Devamını Oku