Javascript ile CSS Kodlarını Sıkıştırma (Compressor)

Javascript ile Css kodlarının nasıl sıkıştırılacağını inceleyeceğiz.

Javascript ile CSS Kodlarını Sıkıştırma (Compressor)

Javascript ile css kodlarını sıkıştırma işlemini, kullanıcıdan gelen verileri alarak yapacağız. Kullanıcıdan alınan verileri gerekli işlemlerden geçirerek sıkıştırma işlemini sağlayacağız. Ardından sıkıştırılmış CSS kodlarını kullanıcıya sunacağız.

CSS kodlarının sıkıştırılması için replace ifadesini çokça kullanacağız. Çünkü gerekli şartları yakalayıp, düzenleme yapmamız gerekmektedir. Çok uzatmadan HTML kodlarından başlayarak işlemin nasıl sağlandığını inceleyelim.

HTML Kodlaması

Bu alanda basit bir şekilde bir alan oluşturacağız. Bu alanda kullanıcıdan alınan bilgiler için bir TEXTAREA olacak. Bu TEXTAREA’ya yazılan yazı sonrasında işlemin sağlanması için bir BUTTON oluşturup, hazırladığımız fonksiyonu tetikleyeceğiz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Compressor</title>
</head>
<body>
  
  <h1>CSS Compressor</h1>
  <div class="form-group">
    <label for="css-textarea">CSS Kodları:</label>
    <textarea id="css-textarea"></textarea>
  </div>

  <button id="compress-button">Sıkıştır</button>

  <div class="form-group">
    <label for="compressed-css-textarea">Sıkıştırılmış CSS Kodları:</label>
    <textarea id="compressed-css-textarea" readonly></textarea>
  </div>

</body>
</html>

HTML iskeletini oluşturduktan sonra CSS kodlamasına geçelim. Bu kodlarda, uygulamanın daha görünür olmasını ve kullanıcıların sorun yaşamadan işlerini gerçekleştirmesini sağlayacağız.

CSS Kodlaması

Hazırlamış olduğumuz uygulamanın daha güzel görünmesini sağlayacağız. CSS kodlarına aşağıdan ulaşabilirsiniz.

body{font-family:Arial,sans-serif}
h1{text-align:center;margin-top:50px}
.form-group{margin-bottom:20px}
label{display:block;margin-bottom:5px}
textarea{width:100%;height:200px;padding:10px;border:1px solid #ccc;font-size:14px}
button{display:block;width:100%;margin:20px 0px;padding:10px;font-size:16px;background-color:#4CAF50;color:#fff;border:none;cursor:pointer}
button:hover{background-color:#3e8e41}
#compressed-css-textarea{margin-top:20px}

CSS kodlarının ardından artık en önemli yer alan Javascript kodlarına geliyoruz. Bu kodları önce paylaşalım sonrasında gerekli açıklamaları yapalım.

JavaScript Kodlaması

Javascript kodlaması, bu uygulamaya can veren kodlardır. HTML ve CSS kodlaması uygulamanın temellerini oluşturuyordu. Şimdi Javascript kodlarını hazırlayıp, sonrasında gerekli açıklamalara geçelim.

function compressCSS(css) {
    // Boşlukları, tabları ve satır sonu karakterlerini kaldır
    css = css.replace(/\s+/g, ' ');
    // Yorumları kaldır
    css = css.replace(/\/\*.*?\*\//gs, '');
    // Kolonları ve süslü parantezleri sıkıştır
    css = css.replace(/:\s/g, ':');
    css = css.replace(/\s*{\s*/g, '{');
    css = css.replace(/\s*}\s*/g, '}');
    // Noktalı virgüllerden sonra boşlukları kaldır
    css = css.replace(/;\s+/g, ';');
    // Dosya sonundaki boşlukları kaldır
    css = css.replace(/\s*$/g, '');
    return css;
}

// CSS kodlarının girildiği text area elementi
var cssTextArea = document.getElementById('css-textarea');
// Sıkıştır butonu elementi
var compressButton = document.getElementById('compress-button');
// Sıkıştırılmış CSS kodlarının gösterildiği text area elementi
var compressedCssTextArea = document.getElementById('compressed-css-textarea');

// Sıkıştır butonuna tıklandığında
compressButton.addEventListener('click', function() {
    // CSS kodlarını al
    var css = cssTextArea.value;
    // CSS kodlarını sıkıştır
    var compressed_css = compressCSS(css);
    // Sıkıştırılmış CSS kodlarını göster
    compressedCssTextArea.value = compressed_css;
});

Hazırlamış olduğumuz bu uygulamada, compressCSS ismide bir fonksiyon bulunmaktadır. Bu fonksiyon gönderilen CSS kodlarının sıkıştırılmasını sağlayacaktır. Sıkıştırma işlemi, belirlenen şartlardaki alanların temizlenmesiyle oluşturulmaktadır. Bu fonksiyonda, replace kullanarak gerekli ReGEX kodlarıyla birlikte temizleme işlemini sağlıyoruz. Temizlenmiş olan veriler sonrasında return ile sonucu döndürüyoruz.

Fonksiyonun tetiklenmesi içinde gerekli alanları seçtikten sonra, sıkıştır butonunun basılmasıyla birlikte fonksiyonu tetikliyoruz ve sonuca ulaşmış oluyoruz. Böylece Javascript ile css kodlarını sıkıştırma işlemi sağlamış oluyoruz.

Uygulamanın Tam Hali

Yukarıda gerçekleştirmiş olduğumuz uygulamanın tam halini de paylaşayım. Bu kodların üzerinde gerekli düzenlemeler yaparak farklı sonuçlar alabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Compressor</title>
  <style>
    body{font-family:Arial,sans-serif}
    h1{text-align:center;margin-top:50px}
    .form-group{margin-bottom:20px}
    label{display:block;margin-bottom:5px}
    textarea{width:100%;height:200px;padding:10px;border:1px solid #ccc;font-size:14px}
    button{display:block;width:100%;margin:20px 0px;padding:10px;font-size:16px;background-color:#4CAF50;color:#fff;border:none;cursor:pointer}
    button:hover{background-color:#3e8e41}
    #compressed-css-textarea{margin-top:20px}
  </style>
</head>
<body>
  
  <h1>CSS Compressor</h1>
  <div class="form-group">
    <label for="css-textarea">CSS Kodları:</label>
    <textarea id="css-textarea"></textarea>
  </div>

  <button id="compress-button">Sıkıştır</button>

  <div class="form-group">
    <label for="compressed-css-textarea">Sıkıştırılmış CSS Kodları:</label>
    <textarea id="compressed-css-textarea" readonly></textarea>
  </div>

  <script>
    function compressCSS(css) {
        // Boşlukları, tabları ve satır sonu karakterlerini kaldır
        css = css.replace(/\s+/g, ' ');
        // Yorumları kaldır
        css = css.replace(/\/\*.*?\*\//gs, '');
        // Kolonları ve süslü parantezleri sıkıştır
        css = css.replace(/:\s/g, ':');
        css = css.replace(/\s*{\s*/g, '{');
        css = css.replace(/\s*}\s*/g, '}');
        // Noktalı virgüllerden sonra boşlukları kaldır
        css = css.replace(/;\s+/g, ';');
        // Dosya sonundaki boşlukları kaldır
        css = css.replace(/\s*$/g, '');
        return css;
    }

    // CSS kodlarının girildiği text area elementi
    var cssTextArea = document.getElementById('css-textarea');
    // Sıkıştır butonu elementi
    var compressButton = document.getElementById('compress-button');
    // Sıkıştırılmış CSS kodlarının gösterildiği text area elementi
    var compressedCssTextArea = document.getElementById('compressed-css-textarea');

    // Sıkıştır butonuna tıklandığında
    compressButton.addEventListener('click', function() {
        // CSS kodlarını al
        var css = cssTextArea.value;
        // CSS kodlarını sıkıştır
        var compressed_css = compressCSS(css);
        // Sıkıştırılmış CSS kodlarını göster
        compressedCssTextArea.value = compressed_css;
    });
  </script>

</body>
</html>

Bu kodları kullanarak, kullanıcıdan alınan CSS kodlarını sıkıştırıp yine kullanıcıya sunabilirsiniz. Bu uygulamaya ek olarak, sıkıştırma oranını yada sıkıştırma seçeneğini sunarak detaylandırabilirsiniz.

Exit mobile version