KUT 1.0’da desteklenir

Stil Kütüphanesi

Bu bölümde CSS kodlarının style etiketiyle yazdırılması ve kaynak kodun küçültülmesi (minify) ile ilgili kullanımlar anlatılmıştır.

3 dk okumaSon kontrol: KUT 1.0

This article is currently available in Turkish. Its English translation is being prepared.

Bu bölümde CSS kodlarının <style> etiketiyle yazdırılması ve kaynak kodun küçültülmesi (minify) ile ilgili kullanımlar anlatılmıştır.

Bölüm Başlıkları

# Yöntemler
# Compress
# Dinamik Stil Dosyası

# Yöntemler

Style::open() : string
Style::close() : string
Style::type(string $type) : this
Style::library(string ...$libraries) : this
Style::tag() : this
Style::compress(callable\|string $content) : string

# Compress KUT 1.0’da desteklenir

CSS kodunu anlamını değiştirmeden küçültür: yorumlar ve gereksiz boşluklar kaldırılır, bildirim bloklarının son noktalı virgülü atılır. Tırnak içindeki metinler ve url(...) değerleri bayt bayt korunur. Kod içinde bir <style> sarmalayıcısı varsa çıkarılır.

Script::compress() ile farkı: Script::compress() JavaScript kodunu paketleyip karıştırır (obfuscate). Style::compress() yalnız küçültür; çıktı okunabilir CSS olarak kalır ve tarayıcının ayrıştırdığı kurallar birebir aynıdır.

Parametreler

callable\|string $content	CSS kodu ya da çıktısı CSS olan bir geri çağırım (çıktı tamponlanır).
return string

Kullanım

@Style::compress('.card { color : red ; /* not */ margin: 0 auto !important; }')

.card{color :red;margin:0 auto!important}

Style::tag() ile birlikte çağrıldığında çıktı otomatik olarak <style> etiketi içine alınır:

@Style::tag()->compress
({[|
    .card { color: red; }
|]})

<style type="text/css">
.card{color:red}
</style>

Bilinmesi gerekenler

Seçicilerde iki nokta üst üsteden önceki boşluk korunur; .a :hover ile .a:hover farklı seçicilerdir.
+ ve - çevresindeki boşluklara dokunulmaz; calc(100% - 2rem) geçerli kalır.
Küçültme sıkıştırma (gzip/brotli) yerine geçmez; sunucu sıkıştırmasıyla birlikte kullanılır.

# Dinamik Stil Dosyası

Ayarlara göre üretilen bir stil dosyası, görünümü CSS olarak basan bir kontrolcü aksiyonu ile sunulabilir. Tarayıcı dosyayı doğrudan istediği için aksiyon :void olarak işaretlenmez (void aksiyonlar yalnız AJAX isteklerinde çalışır) ve çıktı die() ile gönderilir.

Dosya: Controllers/Styles.php

namespace Project\Controllers;

use Style;
use Import;

class Styles extends Controller
{
    public function theme()
    {
        $css = Style::compress((string) Import::usable()->view('Styles/theme'));

        header('Content-Type: text/css; charset=utf-8');

        die($css);
    }
}

Görünüm (Views/Styles/theme.wizard.php) CSS kodunu bir <style> öğesi içinde yazar; bu öğe @media gibi kuralların şablon yönergesi olarak derlenmesini engeller. Wizard'ın bitişik }} dizisini yazdırma kapanışı saydığını unutmayın: iki kapanış süslü parantezinin arasına bir satır sonu koyun.