Matcha.css – शुद्ध CSS से बना ड्रॉप-इन semantic styling लाइब्रेरी

 (matcha.mizu.sh)
4 पॉइंट द्वारा GN⁺ 2024-05-25 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • matcha.css HTML elements को डिफ़ॉल्ट browser stylesheet की तरह तुरंत स्टाइल करता है, जिससे तेज़ prototyping, static HTML, और Markdown से बने दस्तावेज़ों में manual CSS काम कम हो जाता है
  • इसे build step, dependency, JavaScript, या configuration के बिना सिर्फ `` की एक पंक्ति से लागू किया जा सकता है, और इसका डिफ़ॉल्ट gzip आकार लगभग 8.81kB है
  • यह document structure और semantic elements का उपयोग करके `` submenu, required input * संकेत, और input validation state के हिसाब से border color जैसे व्यवहार केवल CSS से संभालता है
  • यह Default, Lite, Utility classes, Istanbul coverage presets और custom builder देता है, और विस्तृत style directories को सीधे import भी किया जा सकता है
  • यह MIT लाइसेंस वाला open source है; utility classes और layout features सुविधाजनक हैं, लेकिन वे दस्तावेज़ में classes जोड़ते हैं, इसलिए semantic-आधारित उपयोग से कुछ दूरी बन सकती है

HTML दस्तावेज़ों को तुरंत स्टाइल करने वाला ड्रॉप-इन CSS

  • matcha.css शुद्ध CSS में HTML elements को स्टाइल करने वाली एक ड्रॉप-इन लाइब्रेरी है
  • इसका फ़ोकस यह है कि उपयोगकर्ता को दस्तावेज़ में सीधे बदलाव किए बिना, default browser stylesheet की तरह HTML elements को देखने में बेहतर बनाया जाए
  • यह तेज़ prototyping, static HTML pages, Markdown से बने documents, और उन developers के लिए उपयुक्त है जो CSS की बारीकियों में गहराई से जाए बिना HTML elements की पूरी रेंज का उपयोग करना चाहते हैं
  • यह पेज खुद भी matcha.css से स्टाइल किया गया है

एक पंक्ति में शुरू करें और आसानी से हटाएँ

  • इसे build step, dependency, JavaScript, configuration, या document refactoring के बिना इस्तेमाल किया जा सकता है
  • gzip के हिसाब से default build size ~8.81kB है
  • document के `` में नीचे की एक पंक्ति जोड़ते ही यह लागू हो जाता है
  • हटाते समय भी बस वही `` निकालना होता है, और इसे इस तरह डिज़ाइन किया गया है कि document refactoring या cleanup की ज़रूरत न पड़े
  • assets Vercel पर host किए गए हैं, और npm package को वितरित करने वाली CDN service JSdelivr से भी इसका उपयोग किया जा सकता है
  • सभी public versions /v/ directory में उपलब्ध हैं, और डिफ़ॉल्ट रूप से main branch serve की जाती है

semantic structure का उपयोग करने वाली styling

  • matcha.css document structure और element hierarchy के आधार पर styles को समायोजित करता है

  • स्वचालित व्यवहार के उदाहरण

    • `` elements को nest करने पर implicit submenu बनता है
    • को के साथ इस्तेमाल करने पर required field marker * अपने-आप जुड़ जाता है
    • [data-color-scheme="light"] light mode को force करता है, और [data-color-scheme="dark"] dark mode को force करता है
    • [data-color-scheme] को किसी विशेष element पर लगाकर चुनिंदा रूप से color scheme force की जा सकती है
    • :root CSS variables सेट करता है, और @media (prefers-color-scheme) user preferences के आधार पर mode सेट करता है
    • !important rule का उपयोग नहीं किया जाता, इसलिए ज़रूरत पड़ने पर styles override करना आसान है

build और deployment के विकल्प

  • default build के अलावा अलग-अलग उद्देश्यों के लिए preset builds दिए गए हैं
    • Default ~8.81kB: @istanbul-coverage को छोड़कर सभी semantic styling और अतिरिक्त features
    • Lite ~5.59kB: सभी semantic styling, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB: @root, @utilities
    • Istanbul coverage ~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
  • केवल ज़रूरी features चुनने के लिए custom builder का उपयोग किया जा सकता है
  • और जटिल customization के लिए fork करके सीधे patch करना भी संभव है
  • github.com/lowlighter/matcha/styles की हर subdirectory वेबसाइट से सीधे serve की जाती है
    • उदाहरण के लिए, अगर केवल @syntax-highlighting चाहिए तो उसका mod.css सीधे include किया जा सकता है
    • अगर आपका अपना CSS variables सेट नहीं है, तो @root package की ज़रूरत पड़ने की संभावना अधिक है
    • सुविधा के लिए सभी mod.css files parent directory alias से भी उपलब्ध हैं

किन HTML elements को स्टाइल किया जाता है

  • document structure

    • section, article, header, footer, aside, nav, menu, hgroup, heading elements आदि को स्टाइल किया जाता है
    • `` को इस तरह डिज़ाइन किया गया है कि parent container अगर display: flex हो तो वह उसके साथ स्वाभाविक रूप से integrate हो सके
    • के अंदर breadcrumb की तरह दिखता है, और `` navigation list की तरह दिखता है

  • text और inline elements

    • , , , , , , , , , , , , , , , , , , `` आदि के लिए styles दिए गए हैं
    • क्योंकि browser का default tooltip स्टाइल नहीं किया जा सकता, CSS tooltip के लिए [title] की जगह [data-title] attribute इस्तेमाल करने को कहा गया है

  • form elements

    • , , , , , , , , `` को स्टाइल किया जाता है
    • input elements पर browser द्वारा की जाने वाली validation के अलावा अलग validation नहीं की जाती
    • :user-valid पर --success border और :user-invalid पर --danger border लागू होता है
    • pattern में required status अपने-आप पहचाना जा सकता है, लेकिन pattern में यह संभव नहीं है

  • tables और media

    • `` पर border collapse लागू होता है, और अगर parent की width तय हो तो overflow अपने-आप उपयोग होता है
    • इसे .table-responsive container में wrap किया जा सकता है
    • , , `` पर rounded corner styles लागू होते हैं

  • और

    • और भी default styling targets हैं
    • `` का ::backdrop, dialog.showModal() इस्तेमाल होने पर दिखाई देता है
    • submit पर browser JavaScript के बिना dialog बंद कर सके, इसके लिए `` उपयोग करने की सलाह दी जाती है

layout features की सुविधा और उसकी कीमत

  • matcha.css document layout options भी देता है
  • किसी element में .layout-simple class जोड़ने पर simple layout सक्रिय हो जाता है
  • आवश्यक structure में .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type आदि शामिल हैं
  • media conditions के अनुसार structure बदलता है
    • default screen पर header और main केंद्र में रहते हैं
    • min-width: 960px पर aside और main वाला layout बनता है
    • min-width: 1280px पर दो aside और main वाला layout इस्तेमाल होता है
  • छोटे screen पर aside:nth-of-type(1) छिपा रहता है; data-expand से उसे फिर दिखाया जा सकता है या data-expandable से foldable बनाया जा सकता है
  • layout का उपयोग करने पर document refactoring की ज़रूरत पड़ सकती है, और बाद में matcha.css हटाने पर फिर refactoring करनी पड़ सकती है

utility classes सहायक फीचर के अधिक करीब हैं

  • matcha.css सुविधा के लिए कुछ utility classes भी देता है
  • रंग-संबंधित classes इस प्रकार हैं
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* border color बदलता है, bg-* background color, और fg-* foreground style बदलता है
  • .flash ध्यान आकर्षित करने वाला block बनाता है, और इसे color classes के साथ जोड़ा जा सकता है
  • text, size, position, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow, और SVG fill/stroke से जुड़ी utilities दी जाती हैं
  • margin और padding के लिए 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4 मानों पर आधारित numbered classes उपयोग होती हैं
  • utility classes के लिए document में classes जोड़नी पड़ती हैं, इसलिए बाद में matcha.css से बाहर निकलना कठिन हो सकता है
  • अगर दी गई utilities कम या सीमित लगें, तो utility-first CSS framework का उपयोग या migration पर विचार किया जा सकता है
  • matcha.css का लक्ष्य एक पूर्ण CSS framework बनना नहीं है

code display, editor appearance, और Shadow DOM

  • matcha.css @media (prefers-color-scheme) का पालन करने वाली syntax highlighting classes देता है
  • code editor जैसा रूप बनाने के लिए classes भी शामिल हैं
    • आवश्यक structure है .editor, > textarea, > div.highlight
    • यह अतिरिक्त styling वास्तविक syntax highlighting नहीं करती, सिर्फ code editor जैसा appearance देती है
    • वास्तविक highlighting के लिए highlight.js जैसी syntax highlighting library चाहिए
  • matcha.css :host pseudo-class का उपयोग करके CSS variables भी परिभाषित करता है, इसलिए यह Shadow DOM के साथ compatible है
  • Shadow DOM के अंदर matcha.css को फिर से import करके और अलग custom styles लागू करके इसे बाकी document से बिना टकराव के isolate किया जा सकता है

browser support और license

  • matcha.css का कहना है कि इसे सभी modern browsers के साथ compatible बनाया गया है
  • support table में Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96% आदि शामिल हैं
  • यह open source के रूप में उपलब्ध है और MIT License का उपयोग करता है
  • repository github.com/lowlighter/matcha पर उपलब्ध है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-05-25
Hacker News की राय

  • दस्तावेज़ लेआउट के लिए HTML को single source of truth के रूप में वापस लाने का विचार अच्छा है, और जिन दस्तावेज़ों को जटिल design की ज़रूरत नहीं है, उनके लिए यह productive लग सकता है
    हालांकि default design choices, खासकर रंग और finishing, थोड़े निराश करते हैं। मैं professional designer नहीं हूं, लेकिन अपने बनाए software पर users की शिकायतें झेलने का इतना अनुभव है कि color theory, information density, gradients जैसी background वाले अच्छे designer के काम की तुलना में कुछ अटपटा लगे तो पहचान सकता हूं
    अगर author यह देख रहे हों, तो जानना चाहूंगा कि क्या उन्होंने Bulma या Tailwind जैसे दूसरे FOSS projects की aesthetics का इस्तेमाल करने या किसी professional designer के साथ collaborate करने पर विचार किया है। मुझे पता है कि jgthms भी कभी-कभी इस site पर होते हैं

    • constructive feedback के लिए धन्यवाद, और सच कहूं तो खुद Show HN पोस्ट करने से पहले ही यह HN पर आ गया, इसलिए थोड़ा घबरा गया था
      मैं frontend developer भी नहीं हूं और designer भी नहीं, इसलिए color theory, accessibility और ऐसी चीज़ों को लेकर मेरी जानकारी की कमी दिख सकती है जो दूसरों को obvious लगती हों। शायद इसलिए इसमें हाथ से बनाया हुआ सा एहसास भी आता है
      जिन बातों का आपने ज़िक्र किया, उन्हें आगे और देखूंगा। professional designer के साथ collaboration के मामले में सलाह लेने के लिए खुला हूं, लेकिन यह side project है, इसलिए किसी को hire करने की योजना नहीं है। फिलहाल मुझे लगता है कि experts इसके मुख्य target audience नहीं हैं, और यह hobby users को ज़्यादा appeal करेगा
    • मुझे भी कुछ अटपटा सा महसूस होता है, लेकिन ऐसा designer के बनाए काम में भी हुआ है। फिर भी यह काफ़ी ठीक दिखता है, जैसे किसी ऐसे व्यक्ति ने बनाया हो जिसे design sense थोड़ा-बहुत है, या किसी junior designer ने
      जितना ज़्यादा देर देखता हूं, overall उतना बेहतर लगता है, लेकिन साथ ही हल्का अटपटा एहसास भी बढ़ता है—यह काफ़ी दिलचस्प है
      Edit: शायद teacup का रंग थोड़ा अजीब लग रहा है। पूरा logo मुझे पसंद है, लेकिन teacup का रंग ऊपर वाले background color के थोड़ा और करीब कर दिया जाए तो कैसा रहेगा
    • सहमत हूं। अटपटा लगने का एक उदाहरण button का hover style है
      dark background पर black text aesthetics और accessibility, दोनों लिहाज़ से ठीक नहीं बैठता। default settings और polish हो जाएं तो सोने पर सुहागा होगा
    • site में सीधे custom build बनाने का section है, जिससे default style choices पर कुछ हद तक control मिल जाता है
      लेकिन अगर कोई designer किसी company के design look से match कराने की कोशिश कर रहा हो, तो वह spacing जैसी चीज़ों पर घंटों लगा सकता है, और यह tool शायद उन लोगों के लिए नहीं है

  • ऐसी छोटी libraries मुझे पसंद हैं। अभी मैं pico.css इस्तेमाल कर रहा हूं, लेकिन इसे भी देखूंगा। मुझे लगता है browser के standard DOM elements मूल रूप से ऐसे ही दिखने चाहिए
    लेकिन असल में ऐसा नहीं है, इसलिए ऐसी libraries मौजूद हैं। दूसरे user की comment देखकर मैं इस library में “classless” का मतलब ढूंढ रहा था, और इसी तरह की libraries की एक list मिली
    https://github.com/dbohdan/classless-css

    • “browser के standard DOM elements मूल रूप से ऐसे ही दिखने चाहिए” से सहमत हूं, लेकिन जो लोग खुद styles बनाना चाहते हैं, उनके लिए यह nightmare भी हो सकता है। मौजूदा default styles भी इस मायने में पहले से थोड़ा annoying हैं
      मैं लंबे समय से सोचता रहा हूं कि chrome style और content style के बीच switch करने का कोई तरीका हो तो अच्छा हो। navigation bar या embedded visualizations/interactive elements को chrome mode में रखा जाए, जहां सिर्फ minimal default style मिले, और article body पर user की preferred style लागू हो—ऐसा कुछ अच्छा रहेगा
    • इन्हें तुरंत test करने के लिए एक site भी है। मुझे जो पता है वह है https://www.cssbed.com/
    • pico.css मुझे बहुत पसंद है। यह तेज़ और सीखने में आसान होते हुए भी काफ़ी feature-complete middle ground है
      Flask + HTMX + AlpineJS + PicoCSS combo अभी मेरा “All Python and HTML SPA” है

  • दिलचस्प दिखता है, लेकिन links की underline हटाना और hover से पहले सिर्फ color पर निर्भर रहना accessibility के लिहाज़ से बहुत खराब है

    • color vision deficiency वाले लोग links को underline या highlight करने वाला CSS extension जोड़ सकते हैं
      visually impaired लोग screen reader या braille display इस्तेमाल करते हैं, इसलिए उन्हें underline की ज़रूरत नहीं होती। तो फिर underline और किसे चाहिए?

  • promising दिखता है। मैं Simple.css इस्तेमाल करता आया हूं: https://simplecss.org/
    सरसरी तौर पर देखने पर लगता है कि matcha.css थोड़ा ज़्यादा advanced है, इसलिए इसे एक बार try करूंगा

    • classless semantic CSS libraries पहले से काफी हैं
      उदाहरण के लिए https://andybrewer.github.io/mvp/, https://oxal.org/projects/sakura/, https://yegor256.github.io/tacit/, https://chimera-demo.vercel.app/, https://watercss.kognise.dev/, https://missing.style/ वगैरह
      अफसोस, matcha बहुत promising भी नहीं लगता। styled elements को जल्दी देखने के लिए कोई demo page नहीं है, color palette चुभती है, और default button hover में dark background पर dark text है, इसलिए पढ़ना मुश्किल है। इसे निश्चित रूप से और polish की ज़रूरत है
    • इसमें 2010s की तुलना में 2020s वाला feel ज़्यादा है। यह bias मैंने दूसरे developers से सीखा है, और अपने बनाए software की first impression खराब न हो, इसलिए उसी के हिसाब से चलता हूं

  • शायद ऐसी classless CSS framework generate करने वाला tool चाहिए। तब हर कोई color palette, padding, font size वगैरह को बारीकी से adjust कर सकेगा

  • 30 साल तक हम standard controls में proportional scrollbars इस्तेमाल करते आए हैं। हमें पता चल जाता था कि current window document का कितना हिस्सा दिखा रही है, और scrollbar पर click करके document size के अनुपात में आसानी से किसी position पर जा सकते थे
    scrollbar के ऊपर-नीचे arrow buttons भी इस्तेमाल कर सकते थे, tab से वहां जाकर keyboard से control भी कर सकते थे। अगर vision या motor ability में limitation हो तो operating system settings से contrast बढ़ाया जा सकता था या उन्हें बड़ा बनाया जा सकता था
    लेकिन 2024 के web में लोग scrollbars को routinely तोड़कर user experience nightmare बना रहे हैं। यह शर्मनाक है कि CSS को OS-provided standard controls को पूरी तरह बिगाड़ने की छूट देकर, जो पहले सही काम करते थे, browser UI/UX को घटिया बना दिया गया है
    कृपया इसे इस्तेमाल न करें

    • कड़ा असहमति
      operating system द्वारा दिए गए standard controls भी समय के साथ बदतर हुए हैं। उदाहरण के लिए Apple के गायब हो जाने वाले scrollbars और rounded checkboxes
      उन्हें आसानी से बदला नहीं जा सकता, लेकिन CSS से कम से कम उन standard controls को बेहतर बनाया जा सकता है

  • मुझे यह preview feature पसंद आया जिससे देखा जा सकता है कि यह दूसरी websites पर कैसा दिखेगा। CSS page के लिए यह बहुत intuitive और सही बैठता है

  • Swyx का Spark Joy repository छोड़ा नहीं जा सकता:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • अभी भी नए CSS frameworks क्यों बनते जा रहे हैं? यह problem पहले से solved क्यों नहीं है?

    • यह CSS framework नहीं है, बल्कि एक stylesheet है जिसे तब इस्तेमाल करते हैं जब CSS या styling की चिंता नहीं करनी, लेकिन site ठीक-ठाक दिखनी चाहिए
    • CSS का बड़ा हिस्सा art और aesthetics से जुड़ा है। CSS का काम कभी “खत्म” नहीं होगा
      जब तक artists web medium में खुद को express करना चाहेंगे, नई stylesheets और “frameworks” आती रहेंगी