Matcha.css – Saf CSS ile uygulanmış drop-in semantik stillendirme kütüphanesi

 (matcha.mizu.sh)
4 puan yazan GN⁺ 2024-05-25 | 1 yorum | WhatsApp'ta paylaş
  • matcha.css, HTML öğelerini varsayılan tarayıcı stil sayfası gibi doğrudan stillendirerek hızlı prototipleme, statik HTML ve Markdown’dan üretilen belgelerde manuel CSS işini azaltır
  • Derleme adımı, bağımlılık, JavaScript ve yapılandırma olmadan tek satır `` ile uygulanır; varsayılan gzip boyutu yaklaşık 8.81kB’dir
  • Belge yapısını ve semantik öğeleri kullanarak `` alt menüleri, zorunlu giriş * işareti ve giriş doğrulama durumlarına göre kenarlık renkleri gibi davranışları yalnızca CSS ile işler
  • Default, Lite, Utility classes, Istanbul coverage preset’leri ve custom builder sunar; ayrıntılı stil dizinleri de doğrudan içe aktarılabilir
  • MIT lisanslı açık kaynaktır; utility class’lar ve düzen özellikleri kullanışlı olsa da belgeye class eklediği için semantik temelli kullanımdan uzaklaşabilir

HTML belgelerini doğrudan stillendiren drop-in CSS

  • matcha.css, HTML öğelerini saf CSS ile stillendiren bir drop-in kütüphanedir
  • Kullanıcının belgeyi elle yamamasına gerek kalmadan, varsayılan tarayıcı stil sayfasına benzer şekilde HTML öğelerini hoş görünümlü hâle getirmeye odaklanır
  • Hızlı prototipleme, statik HTML sayfaları, Markdown’dan üretilen belgeler ve CSS ayrıntılarına fazla girmeden HTML öğelerinin tüm kapsamını kullanmak isteyen geliştiriciler için uygundur
  • Bu sayfanın kendisi de matcha.css ile stillendirilmiştir

Tek satırla eklenebilir ve kolayca geri alınabilir

  • Derleme adımı, bağımlılık, JavaScript, yapılandırma veya belge refaktörü olmadan kullanılabilir
  • Varsayılan derlemenin gzip boyutu ~8.81kB’dir
  • Belgenin `` bölümüne aşağıdaki tek satır eklendiğinde uygulanır
  • Kaldırmak için de ilgili `` öğesini çıkarmak yeterlidir; belge refaktörü veya temizlik gerektirmeyecek şekilde tasarlanmıştır
  • Varlıklar Vercel üzerinde barındırılır; npm paketleri dağıtan CDN servisi JSdelivr üzerinden de kullanılabilir
  • Tüm herkese açık sürümler /v/ dizininde sunulur ve varsayılan olarak main branch’i servis edilir

Semantik yapıyı kullanan stillendirme

  • matcha.css, stilleri belge yapısı ve öğe hiyerarşisine göre ayarlar

  • Otomatik davranış örnekleri

    • `` öğelerini iç içe geçirmek örtük alt menüler oluşturur
    • öğesi ile birlikte kullanıldığında zorunlu alan işareti * otomatik olarak eklenir
    • [data-color-scheme="light"] light mode’u, [data-color-scheme="dark"] ise dark mode’u zorlar
    • [data-color-scheme], seçici olarak renk şemasını zorlamak için belirli öğelere uygulanabilir
    • :root CSS değişkenlerini ayarlar, @media (prefers-color-scheme) ise kullanıcı tercihine göre modu belirler
    • !important kuralları kullanılmadığı için gerektiğinde stillerin üzerine yazmak kolaydır

Derleme ve dağıtım seçenekleri

  • Varsayılan derlemeye ek olarak amaca yönelik preset derlemeler sunar
    • Default ~8.81kB: @istanbul-coverage hariç tüm semantik stillendirme ve ek özellikler
    • Lite ~5.59kB: tüm semantik stillendirme, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB: @root, @utilities
    • Istanbul coverage ~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
  • Yalnızca gerekli özellikleri seçmek için custom builder kullanılabilir
  • Daha karmaşık özelleştirmeler için fork edip doğrudan yama yapmak da mümkündür
  • github.com/lowlighter/matcha/styles altındaki her alt dizin web sitesinden doğrudan servis edilir
    • Örneğin yalnızca @syntax-highlighting kullanmak için ilgili mod.css doğrudan dahil edilebilir
    • Kendi CSS değişkenlerinizi sağlamıyorsanız @root paketine ihtiyaç duyma olasılığınız yüksektir
    • Tüm mod.css dosyaları kolaylık için üst dizin takma adıyla da sunulur

Stillendirilen HTML öğelerinin kapsamı

  • Belge yapısı

    • section, article, header, footer, aside, nav, menu, hgroup, başlık öğeleri vb. stillendirilir
    • ``, üst kapsayıcı display: flex olduğunda doğal biçimde entegre olacak şekilde tasarlanmıştır
    • içindeki breadcrumb gibi, `` ise navigasyon listesi gibi gösterilir

  • Metin ve satır içi öğeler

    • , , , , , , , , , , , , , , , , , , `` gibi öğelere stil sağlar
    • Tarayıcının varsayılan tooltip’leri stillendirilemediğinden, CSS tooltip’leri için [title] yerine [data-title] niteliğinin kullanılması önerilir

  • Form öğeleri

    • , , , , , , , , `` öğelerini stillendirir
    • Giriş öğeleri, tarayıcının yaptığı doğrulamanın dışında ek doğrulama yapmaz
    • :user-valid için --success kenarlığı, :user-invalid için --danger kenarlığı uygulanır
    • deseni kullanıldığında required olup olmadığı otomatik algılanabilir, ancak deseninde bu mümkün değildir

  • Tablolar ve medya

    • `` için border collapse uygulanır; üst öğede genişlik varsa otomatik overflow kullanılır
    • .table-responsive kapsayıcısıyla sarılabilir
    • , , `` için yuvarlatılmış köşe stili uygulanır

  • ve

    • ve de varsayılan stillendirme kapsamındadır
    • `` öğesinin ::backdrop’u dialog.showModal() kullanıldığında gösterilir
    • Gönderim sırasında tarayıcının JavaScript olmadan dialog’u kapatması için `` kullanılması önerilir

Düzen özelliklerinin kolaylığı ve maliyeti

  • matcha.css belge düzeni seçenekleri de sunar
  • Bir öğeye .layout-simple class’ı eklendiğinde basit düzen etkinleştirilir
  • Gerekli yapı .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type vb. içerir
  • Yapı, medya koşullarına göre değişir
    • Varsayılan ekranda header ve main odaklıdır
    • min-width: 960px için aside ve main yapısı kullanılır
    • min-width: 1280px için iki aside ve main yapısı kullanılır
  • Küçük ekranlarda aside:nth-of-type(1) gizlenir; data-expand ile yeniden görünür hâle getirilebilir veya data-expandable ile katlanabilir yapılabilir
  • Düzen kullanımı belge refaktörü gerektirebilir; ileride matcha.css kullanımını bırakırken yeniden refaktör gerekebilir

Utility class’lar daha çok yardımcı işlev niteliğindedir

  • matcha.css kolaylık için bazı utility class’lar da sunar
  • Renkle ilgili class’lar şunlardır
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* kenarlık rengini, bg-* arka plan rengini, fg-* ise ön plan stilini değiştirir
  • .flash, dikkat çeken bir blok oluşturur ve renk class’larıyla birlikte kullanılabilir
  • Metin, boyut, konum, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow ve SVG fill/stroke ile ilgili utility’ler sağlar
  • Margin ve padding için 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4 değerlerine dayanan numaralı class’lar kullanılır
  • Utility class’lar belgeye class eklemeyi gerektirdiğinden, daha sonra matcha.css’ten çıkmayı zorlaştırabilir
  • Sunulan utility’ler yetersiz veya sınırlı kalıyorsa utility-first CSS framework kullanmak ya da ona geçmek düşünülmelidir
  • matcha.css tam kapsamlı bir CSS framework olmayı hedeflemez

Kod gösterimi, editör görünümü ve Shadow DOM

  • matcha.css, @media (prefers-color-scheme)’i izleyen sözdizimi vurgulama class’ları sağlar
  • Kod editörü görünümü oluşturmak için class’lar da içerir
    • Gerekli yapı .editor, > textarea, > div.highlight şeklindedir
    • Bu ek stil gerçek sözdizimi vurgulaması yapmaz, yalnızca kod editörü görünümünü stillendirir
    • Gerçek vurgulama için highlight.js gibi bir sözdizimi vurgulama kütüphanesi gerekir
  • matcha.css, :host sözde class’ını kullanarak CSS değişkenleri de tanımladığı için Shadow DOM ile uyumludur
  • Shadow DOM içinde matcha.css yeniden import edilip ayrı custom styles uygulanarak belgenin geri kalanıyla çakışmayacak şekilde yalıtılabilir

Tarayıcı desteği ve lisans

  • matcha.css, tüm modern tarayıcılarla uyumlu olacak şekilde tasarlandığını belirtir
  • Destek tablosunda Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96% vb. yer alır
  • Açık kaynak olarak yayımlanmıştır ve MIT License kullanır
  • Depo github.com/lowlighter/matcha adresindedir

İlgili okumalar

1 yorum

 
GN⁺ 2024-05-25
Hacker News yorumları

  • Belge yerleşimi için tek doğruluk kaynağını HTML olarak yeniden canlandırma fikri hoşuma gidiyor; karmaşık tasarıma ihtiyaç duymayan belgeler için üretken olabilir gibi görünüyor.
    Ancak varsayılan tasarım tercihleri, özellikle renkler ve son dokunuşlar biraz hayal kırıklığı yaratıyor. Profesyonel tasarımcı değilim ama kendi yaptığım yazılımlar hakkında kullanıcıların şikâyet etmesini yeterince deneyimledim; bu yüzden renk teorisi, bilgi yoğunluğu, gradyanlar gibi arka planlara sahip iyi bir tasarımcının yaptığı şeylerle kıyaslayınca bir şeylerin tuhaf durduğunu sezebiliyorum.
    Yazarı bunu görüyorsa, Bulma ya da Tailwind gibi başka FOSS projelerinin estetiğinden yararlanmayı veya profesyonel bir tasarımcıyla çalışmayı düşünüp düşünmediğini merak ediyorum. Bildiğim kadarıyla jgthms de ara sıra bu sitede oluyor.

    • Yapıcı geri bildirim için teşekkürler; açıkçası kendim Show HN göndermeden önce HN'e düşmesi beni biraz hazırlıksız yakaladı.
      Frontend geliştiricisi de tasarımcı da olmadığım için renk teorisi, erişilebilirlik ve başkalarına bariz gelebilecek unsurlar konusundaki bilgi eksikliğim ortaya çıkabilir. Sanırım bu yüzden el yapımı bir hissi de var.
      Bahsettiğin konulara ileride daha fazla bakacağım. Profesyonel bir tasarımcıyla çalışmaya gelince, tavsiye almaya açığım ama bu bir yan proje olduğu için ayrıca birini işe alma planım yok. Şimdilik ana hedef kitlenin uzmanlar olmadığını, daha çok hobi kullanıcılarına hitap edeceğini düşünüyorum.
    • Ben de bir şeylerin tuhaf olduğu hissine kapılıyorum ama tasarımcıların yaptığı şeylerde de bunu yaşadığım oldu. Yine de gayet iyi görünüyor; bir miktar tasarım gözü olan biri ya da yeni başlayan bir tasarımcı yapmış gibi duruyor.
      Ne kadar uzun bakarsam genel olarak o kadar iyi görünüyor, ama aynı zamanda hafif tuhaflık hissi de güçleniyor; bu oldukça ilginç.
      Düzenleme: Sanırım çay fincanının rengi biraz tuhaf hissettiriyor. Logonun geneli hoşuma gidiyor ama fincan rengini üstteki arka plan rengine daha yakın yapmak nasıl olurdu diye düşünüyorum.
    • Katılıyorum. Tuhaf hissettiren örneklerden biri düğmenin hover stili.
      Koyu arka plan üzerinde siyah yazı hem estetik hem de erişilebilirlik açısından pek uygun değil. Varsayılan ayarlar biraz daha cilalanırsa harika olur.
    • Sitede doğrudan özel derleme oluşturabileceğiniz bir bölüm var; bu da varsayılan stil seçimleri üzerinde bir ölçüde kontrol sağlıyor.
      Ancak şirketin tasarım görünümüne uydurmaya çalışan bir tasarımcı, boşluklar gibi konulara saatler harcayabilir; bu araç sanki o kişiler için değil.

  • Bu tür küçük kütüphaneleri seviyorum. Şu anda pico.css kullanıyorum ama buna da bakacağım. Bence tarayıcıların standart DOM öğeleri zaten böyle görünmeli.
    Ama gerçekte öyle olmadığı için bu tür kütüphaneler var. Başka bir kullanıcının yorumunu görünce bu kütüphanede “classless”ın ne anlama geldiğine baktım ve benzer kütüphanelerin bir listesini buldum.
    https://github.com/dbohdan/classless-css

    • “Tarayıcıların standart DOM öğeleri zaten böyle görünmeli” kısmına katılıyorum, ama kendi stillerini yapmak isteyenler için bu bir kâbusa dönüşebilir. Mevcut varsayılan stiller bile bu açıdan zaten biraz can sıkıcı.
      Uzun zamandır chrome stili ile içerik stili arasında geçiş yapma yolu olsa iyi olur diye düşünüyorum. Gezinme çubuğu ya da gömülü görselleştirme/etkileşim öğeleri, yalnızca minimum varsayılan stili alan chrome modunda kalsa; yazı gövdesi ise kullanıcının tercih ettiği stilleri alsa güzel olurdu.
    • Bunları doğrudan test edebileceğiniz bir site de var. Bildiğim yer: https://www.cssbed.com/
    • pico.css'i gerçekten seviyorum. Hızlı ve kolay öğreniliyor, buna rağmen oldukça yeterli özellik sunan iyi bir denge noktası.
      Flask + HTMX + AlpineJS + PicoCSS kombinasyonu şu anda benim “All Python and HTML SPA”im.

  • İlginç görünüyor, ancak bağlantı alt çizgilerini kaldırıp hover öncesinde yalnızca renge güvenmek erişilebilirlik açısından oldukça kötü.

    • Renk görme bozukluğu olan biri, bağlantıların altını çizen veya onları vurgulayan bir CSS eklentisi ekleyebilir.
      Görme engelliler ekran okuyucu ya da Braille ekran kullanır, dolayısıyla alt çizgiye ihtiyaçları yoktur. Peki başka kimin alt çizgiye ihtiyacı var?

  • Gelecek vadeden bir şeye benziyor. Ben Simple.css kullanıyordum: https://simplecss.org/
    Kabaca bakınca matcha.css biraz daha gelişmiş gibi görünüyor; denemeyi düşünüyorum.

  • Bu tür sınıfsız CSS framework'leri üreten bir araca ihtiyaç olabilir. Böylece herkes renk paleti, padding, yazı tipi boyutu vb. ayarları ince ince düzenleyebilir.

  • 30 yıl boyunca standart kontrollerde orantılı kaydırma çubukları kullandık. Geçerli pencerenin belgenin ne kadarını gösterdiğini anlayabiliyor, kaydırma çubuğuna tıklayarak belgedeki boyuta orantılı bir konuma kolayca gidebiliyorduk.
    Kaydırma çubuğunun üstündeki ve altındaki ok düğmelerini de kullanabiliyor, tab ile üzerine gelip klavyeyle kontrol edebiliyorduk. Görme ya da motor beceri kısıtınız varsa işletim sistemi ayarlarından kontrastı artırabiliyor veya daha büyük yapabiliyordunuz.
    Ama 2024 web'inde insanlar kaydırma çubuklarını rutin olarak bozup bunu bir kullanıcı deneyimi kâbusuna çeviriyor. CSS'in, aslında iyi çalışan işletim sistemi tarafından sağlanan standart kontrolleri tamamen mahvedebilmesine izin verilmesiyle tarayıcı UI/UX'inin kalitesizleşmesi utanç verici.
    Lütfen bunu kullanmayın.

    • Kesinlikle karşıyım.
      İşletim sisteminin sunduğu standart kontroller de zamanla daha kötü hale geldi. Örneğin Apple'ın kaybolan kaydırma çubukları ve yuvarlak onay kutuları var.
      Bunları kolayca değiştiremezsiniz ama CSS kullanırsanız en azından bu standart kontrolleri iyileştirebilirsiniz.

  • Başka web sitelerinde nasıl görüneceğini kontrol edebildiğiniz önizleme özelliği hoşuma gitti. Bir CSS sayfası için gerçekten sezgisel ve çok uygun.

  • Swyx'in Spark Joy deposu atlanamaz:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • Neden hâlâ yeni CSS framework'leri yapılıyor? Neden bu konu çoktan çözülmüş bir problem değil?

    • Bu bir CSS framework'ü değil; CSS ya da stil vermeyle uğraşmak istemediğiniz ama düzgün görünen bir site yapmak istediğinizde alıp kullandığınız bir stil sayfası.
    • CSS'in büyük bir kısmı sanat ve estetikle ilgili. CSS işi asla “bitmeyecek”.
      Sanatçılar web ortamında kendilerini ifade etmek istedikleri sürece yeni stil sayfaları ve “framework”ler çıkmaya devam edecek.