2015 में, सावधानीपूर्वक तरीके से CSS लेआउट सीखना

 (book.mixu.net)
6 पॉइंट द्वारा GN⁺ 2024-03-01 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • यह उन पाठकों के लिए अध्याय-दर-अध्याय सीखने की सामग्री है जो पहले से CSS लेआउट इस्तेमाल कर चुके हैं और लेआउट algorithm को उसके विस्तृत नियमों तक समझना चाहते हैं
  • inline, block, z-index और box model को सिर्फ इस्तेमाल करने के तरीके के रूप में नहीं, बल्कि formatting context और stacking context जैसे निर्णय नियमों के रूप में फिर से समझाता है
  • सामान्य flow में block और inline elements की relative position सिर्फ display से तय नहीं होती; sibling elements और context भी साथ में असर डालते हैं
  • box model के size और margin: auto की calculation positioning method के अनुसार बदलती है, इसलिए इसे एक ही नियम के रूप में याद रखना मुश्किल है
  • normal flow, float, absolute positioning, margin collapsing, overflow, z-index, pseudo-elements और Flexbox से होते हुए centering और grid framework जैसी practical layout समस्याओं तक जाता है

CSS लेआउट को नियमों के रूप में समझना

  • यह सामग्री CSS लेआउट को tips के संग्रह की तरह नहीं, बल्कि rule-based system की तरह देखती है और हर नियम को अध्यायों के क्रम में समझाने वाली लंबी learning material है
  • “pedantic” शब्द की तरह, यह approach छोटी लगने वाली details और formal rules तक को बारीकी से देखती है
  • लक्षित पाठक वे लोग नहीं हैं जो पहली बार CSS सीख रहे हैं, बल्कि वे हैं जो पहले से CSS इस्तेमाल करते हैं और layout behavior को अधिक सटीक तरीके से समझना चाहते हैं
  • websites आम तौर पर क्रमिक रूप से विकसित होती हैं, इसलिए layout को सिर्फ छोटे tips और tricks से सीखना आसान होता है, और इस प्रक्रिया में layout algorithm खुद छूट सकता है
  • मुख्य concepts को क्रम से कवर करता है और हर concept को verify करने के लिए applicable examples भी देता है

अध्याय-दर-अध्याय संरचना

  • Chapter 1: Box positioning in CSS बताता है कि HTML elements से बनने वाले boxes एक-दूसरे के सापेक्ष कैसे रखे जाते हैं
    • CSS के तीन मुख्य positioning methods: normal flow, float, absolute positioning
    • normal flow में anonymous box generation, formatting context, line box, line box के अंदर alignment
    • float order, clearfix, float और parent height की interaction
  • Chapter 2: Box sizing in CSS box model और positioning method के अनुसार अंतर को कवर करता है
    • height, width, margin की calculation अलग-अलग mechanisms का इस्तेमाल करती है
    • calculation method समझने के लिए मौजूदा positioning method और calculation mechanism को साथ में देखना पड़ता है
  • Chapter 3: Additional properties that influence positioning box placement पर असर डालने वाली अतिरिक्त properties और mechanisms को व्यवस्थित करता है
    • margin collapsing, negative margins, overflow
    • max-width, max-height, min-width, min-height
    • stacking context और z-index
    • layout पर pseudo-elements का असर
    • CSS3 box-sizing property
  • Chapter 4: Flexbox CSS 3 Flexbox layout mode समझाता है
  • Chapter 5: CSS layout - tricks and layout techniques पिछले अध्यायों की बातों को वास्तविक समस्याओं पर लागू करता है
    • horizontal और vertical centering
    • CSS grid framework के काम करने का तरीका
    • multi-column layout
    • आम pitfalls और layout tricks
  • reference index का इस्तेमाल किसी खास concept या property को खोजकर संबंधित अध्याय और section तक जाने के लिए किया जा सकता है

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

1 टिप्पणियां

 
GN⁺ 2024-03-01
Hacker News की राय

  • CSS लेआउट समझाते समय सबसे पहले यह कहना चाहिए कि अलग-अलग चार layout systems हैं: सबसे पुराना table, जो अब भी email में इस्तेमाल होता है; body में images के लिए float; आज सबसे ज़्यादा इस्तेमाल होने वाला flexbox; और table का आधुनिक विकल्प grid
    absolute और fixed positioning को भी layout को bypass करने वाले hacks की तरह इस्तेमाल किया जा सकता है

    • absolute और fixed न तो hacks हैं और न ही layout को “bypass” करते हैं
      ये दोनों उन पाँच positioning options में से दो हैं, जो तय करते हैं कि कोई element document flow के अंदर, या किसी खास container के अंदर, कैसे placed और behave होगा: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • पहले वाले दो, flexbox और grid से पहले इस्तेमाल होने वाले वैकल्पिक layout systems के ज़्यादा करीब हैं
      float property को Grid के साथ भी इस्तेमाल किया जा सकता है। सबसे आसान और मूल layout system, normal flow, छूट गया है: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • “table सबसे पुराना CSS layout system है और email में अब भी इस्तेमाल होता है” कहना पूरी तरह सही नहीं है
      असली HTML table markup वेबपेज के हिस्सों को साथ-साथ रखने के सबसे पुराने तरीकों में से एक है और email में भी इस्तेमाल होता है, लेकिन वह CSS से अलग बात है
      CSS में display: table और उससे जुड़ी values हैं, लेकिन मेरी याद में पुराने IE में यह float से ज़्यादा मुश्किल था और इसका इस्तेमाल भी सीमित था। आधुनिक web में भी मैंने इसे ज़्यादा इस्तेमाल होते शायद ही देखा है, शायद इसलिए कि आसपास के markup की requirements बहुत सख्त होती हैं। उदाहरण के लिए order बदलने का कोई तरीका नहीं होता, और अगर कई rows चाहिए हों तो HTML में उस भूमिका वाले elements डालने पड़ते हैं
    • साथ ही, Flexbox Froggy flex सीखने का सबसे अच्छा तरीका है, और CSS लिखने से पहले किसी और के बनाए css-reset rules ले लेना अच्छा रहता है
      क्योंकि यह पुराने backward-compatible behavior को समझदार defaults में बदल देता है। उदाहरण: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • table सबसे पुराना CSS layout system नहीं है। वह flow layout है, और अजीब बात है कि इस list में वह पूरी तरह गायब है

  • float को “container box के left और right edges पर boxes रखने के लिए इस्तेमाल होता है” कहना सटीक नहीं है
    float से ऐसा किया जा सकता है, लेकिन flexbox और grid आने के बाद इसे इस तरह इस्तेमाल नहीं किया जाता। element normal flow से बाहर निकल जाता है, इसलिए CSS सीखने वालों के लिए layout बनाना उलझाने वाला तरीका है
    float layout tool से ज़्यादा typesetting tool के करीब है। अगर लेख खुद को pedantic कहता है, तो उसे और सावधान होना चाहिए

    • HTML/CSS की शुरुआत में यह ज़रूर समझाना चाहिए कि जब ये technologies पहली बार बनी थीं, तब इनका उद्देश्य सिर्फ online document rendering था
      मूल रूप से इन्हें दूसरे लोगों के computer पर मौजूद files के लिए Microsoft Word जैसा बनाया गया था, इसलिए float जैसी शुरुआती properties में से ज़्यादातर typesetting layout के लिए थीं
    • container के अंदर सभी elements container के top की तरफ, और text direction ltr है या rtl, इसके हिसाब से पिछले element के right या left की तरफ float होते हैं
      अगर बची हुई जगह न हो तो वे पिछले elements के नीचे चले जाते हैं। अगर element का display: block है, तो वह horizontal space पूरी भर देता है, इसलिए उसके बाद के सभी elements उसके नीचे float होते हैं। इसी वजह से नाम float है, और element की position calculate करने का यही तरीका है
      float:left|right इस्तेमाल करने पर उसी container के अंदर बाकी elements से पहले उस element को left या right पर जबरन float कराया जाता है। बेशक, अगर container flex या grid इस्तेमाल करता है, तो यह अब इस तरह behave नहीं करता
    • Chapter 1 का बड़ा हिस्सा (https://book.mixu.net/css/1-positioning.html#float-positioni...) float की complexity और उसके special flow को cover करता है, और बताता है कि उस behavior को दूसरे उद्देश्यों के लिए सावधानी से कैसे reuse और apply किया जाए
      खासकर यह देखते हुए कि लिखे जाने के समय flexbox/grid layout मौजूद नहीं थे, मुझे यह काफ़ी बारीक explanation लगता है
    • flexbox layout में यह tool process को सरल बना देता है
      कई properties की चिंता कम कर देता है: https://flexboxcss.com
    • float का इस्तेमाल किए बिना sidenote या marginal note कैसे position करें, यह मुझे ठीक से नहीं पता
      खासकर तब जब note को paragraph के बीच में किसी reference position के साथ align होना हो

  • ऐसे लेख CSS Grid से पहले के हों तब भी भारी लगते हैं। CSS Grid आने के बाद CSS layout और जटिल हो गया है, और web development करते हुए 10 साल हो गए फिर भी CSS की गहराई अब भी समझ से बाहर लगती है
    इसका काम करने का तरीका, दुर्लभ edge cases, अंदरूनी behavior, और features की भारी संख्या—सब ऐसा ही है, और हाल ही में मैंने इस पर एक लेख भी लिखा था
    Grid Layouting की बारीकियां पूरी तरह पकड़ पाता, उससे पहले ही subgrid और container queries आ गए। नई जोड़ी गई कई properties इतनी खास मामलों के लिए हैं कि संदेह होता है कि कभी उनका उपयोग होगा भी या नहीं (hanging-punctuation, font-palette जैसी)
    paragraph hyphenation से जुड़ी कम से कम तीन properties हैं, और यह भी हो सकता है कि आपको पता न हो कि filter property SVG इस्तेमाल करने वाले बिल्कुल अलग तरह के filters को भी support करती है। image scaling algorithm को भी adjust किया जा सकता है, और border-radius elliptical corners भी support करता है
    किसी भी technology के बारे में ऐसी बात कही जा सकती है, लेकिन CSS अलग है। यह बहुत सारी चीजों को बहुत सारे तरीकों से संभालता है, और बहुत ज्यादा, बहुत तेजी से बदलता है: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • “web development करते हुए 10 साल हो गए फिर भी CSS की गहराई नहीं समझ आती” से क्या मतलब है, यह जानने की उत्सुकता है
      मैं उससे भी ज्यादा समय से CSS संभाल रहा हूं, लेकिन align-items है या justify-content, इसे याद रखने की कोशिश भी नहीं करता, इसलिए याद नहीं रहता। flexbox इस्तेमाल करते ही https://css-tricks.com/snippets/css/a-guide-to-flexbox/ खोल लेता हूं
      Grid तो और भी कम याद रहता है। फिर भी कुछ बार बड़बड़ाने और WTF कहने के बाद जो चाहिए वह काफी आसानी से बना लेता हूं, इसलिए गहराई समझ से बाहर है ऐसा महसूस नहीं होता। CSS के बारे में यह बात बहुत सुनी है, लेकिन ज्यादातर मामलों में बिना बहुत मेहनत के मनचाहा layout बनाना मुझे काफी आसान लगता है। बस CSS को JS की तरह याद नहीं रखता
    • अगर CSS layout में रुचि है, तो पहले Flexbox और CSS Grid सीखने की सलाह दूंगा
      दोनों की documentation अच्छी है और ये अपेक्षाकृत intuitive हैं, खासकर grid में अजीब behavior कम है
      आजकल flow layout के बारे में ज्यादा जानना जरूरी नहीं है, और float व table layout को पूरी तरह skip किया जा सकता है। उन्हें बस उनके असली मकसद—text content के अंदर floating images और असली tables—के लिए इस्तेमाल करें
    • frontend काम में हमेशा जो समस्या आती है वह यह है कि हर लेख अपने readers को ऐसा मानता है जैसे वे पिछले 15 सालों से latest trends लगातार follow करते आए हों
      जब पहली बार असली frontend काम किया और डॉलर मिले, तब perl से सीधे DHTML generate कर रहा था। उस acronym को type करना भी muscle memory cache से इतना दूर जा चुका है कि उंगलियां अटकने लगती हैं
      frontend के बारे में मेरी जानकारी ऐसी है जैसे छह साल का बच्चा calculus जानता हो, इसलिए अब लगता है कि catch up करने का कोई तरीका नहीं बचा
    • मेरे साथ भी कुछ ऐसा ही है। बस grid को इधर-उधर इस्तेमाल करना शुरू कर दें तो आम तौर पर ठीक चलता है
      हालांकि plain CSS इस्तेमाल करता हूं और global stylesheet भी आम तौर पर नहीं रखता, इसलिए काफी मदद मिलती है
    • इससे भी बुरा हो सकता था। यह LaTeX भी हो सकता था

  • मैं UI apps बहुत बनाता हूं, और मुख्यतः Angular इस्तेमाल करता हूं, लेकिन आजकल बस Bootstrap या Foundation जैसे frameworks इस्तेमाल करता हूं
    pure CSS के ढेर सारे layout options खासकर responsive design में overwhelming और सिरदर्द हैं। pure CSS आजमाया, लेकिन अंत में बहुत boilerplate इस्तेमाल करना पड़ा और mini-framework जैसा कुछ बन गया
    अगर customized designer website नहीं बना रहे हैं, तो व्यक्तिगत रूप से मुझे बार-बार पहिया फिर से बनाने की जरूरत महसूस नहीं होती

    • boilerplate अब भी थोड़ा है, लेकिन Open Props अच्छा लगता है क्योंकि यह hybrid approach है
      CSS जरूरी नहीं कि पहिया फिर से बनाना हो; यह मुश्किल layouts या वे काम जो पहले JS मांगते थे, उन्हें ज्यादा आसान और powerful बना सकता है
      Bootstrap भी ठीक है, लेकिन advanced layout problems हल करने के लिए अक्सर element inspect करना पड़ता है ताकि असल में कौन-सी styles apply हो रही हैं, यह देखा जा सके। कम से कम मेरा अनुभव ऐसा रहा है, इसलिए व्यक्तिगत रूप से मैं CSS पर दांव लगाऊंगा
      जिस नए feature का इंतजार है वह @scope rule है, जो scoped styles बनाना बहुत आसान कर देगा लगता है
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • flexbox, grid, media query जैसे modern CSS features Bootstrap जैसे frameworks की जरूरत कम करने के लिए जोड़े गए थे

  • क्या यह लेख CSS Grid और CSS columns से पहले लिखा गया था?
    z-index पर भी एक लेख है: https://philipwalton.com/articles/what-no-one-told-you-about...

    • सही। https://book.mixu.net/ के अनुसार यह 2015 में लिखा गया था, और अगर लेख 9 साल पुराना है तो चिंता होती है कि modern CSS के लिए यह बहुत उपयोगी न हो

  • chapter 3 में margin collapsing और negative margins को कवर होते देखकर लगता है कि यह लेख पुराने layout techniques को समझने को प्राथमिकता देता है
    legacy codebase संभालते समय इसकी value है, लेकिन नए projects में इन्हें avoid करना बेहतर है

  • CSS को गहराई से सीखने का सबसे अच्छा तरीका क्या है? official docs देखकर थोड़ा अजीब लगता है कि क्या अभी valid है और क्या नहीं

    • “actual” को “current” के अर्थ में इस्तेमाल करना विषय से अलग है, लेकिन यह मेरी पसंदीदा EU English अभिव्यक्तियों में से एक है
      Dutch में current का अनुवाद actueel और actual का daadwerkelijk होता है, यह सोचें तो बात पूरी तरह समझ आती है। अगर native speaker को भ्रम हो तो शायद यह उल्टा मददगार भी हो सकता है
    • मेरे हिसाब से सबसे अच्छा तरीका है बार-बार कुछ बनाकर देखना
      यह किसी खास learning style के लिए सही बात हो सकती है, लेकिन सच में styles और layouts के साथ छेड़छाड़ करने पर उनके काम करने का practical पक्ष अच्छे से समझ में आ जाता है
      CSS लिखते समय लक्ष्य होता है कि जितना हो सके उतना कम लिखूं। इसलिए नहीं कि मुझे CSS पसंद नहीं है—बल्कि मुझे लगता है कि उसकी बदनामी unfair है—लेकिन इसलिए कि बहुत सारी declarations को परत-दर-परत चढ़ाए बिना layout को अधिक प्रभावी तरीके से style करना सीखा जा सकता है
    • इस हफ्ते frontend तकनीकें दोबारा सीखते हुए मैंने थोड़ी market research की
      CSS basics के लिए सबसे अच्छा resource https://web.dev/learn/css था, और इसमें flexbox व grid भी शामिल हैं
      design guidelines के लिए Refactoring UI की सलाह दूंगा। इसमें The UX Book जैसी किताबों में कम मिलने वाली actionable advice बहुत है
      अपने project में मैं Refactoring UI के authors का TailwindCSS और Daisy UI components इस्तेमाल करता हूं, इसलिए असल में raw CSS नहीं लिखता। शुरुआत में TailwindCSS inline CSS की ओर पीछे लौटना जैसा लगता है, लेकिन alternatives से यह बस बेहतर है। एक बार आज़माने की सलाह दूंगा
    • यहां “official docs” से क्या मतलब है, यह जानना चाहूंगा। specifications[1], या MDN[2]?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      पहला नए web developers के लिए learning resource नहीं है। दूसरा भी official या authoritative document नहीं है, लेकिन आम तौर पर उसमें Baseline support और browser compatibility tables की जानकारी होती है
    • flexbox सीखें, box model सीखें, और खासकर यह सीखें कि margin और padding कब इस्तेमाल करने हैं
      styles की cascading कैसे काम करती है, यह भी सीखना अच्छा है; इससे यह भी समझ आएगा कि SCSS और component development का इस्तेमाल करके हम उससे ज़्यादातर क्यों बचते हैं
      media queries और अलग-अलग screen sizes को target करना भी सीख लें। सबसे बढ़कर, “CSS में x कैसे करें” web search करने में शर्माने की जरूरत नहीं है। spec बहुत बड़ा है और याद रखने को बहुत कुछ है, इसलिए अगर लंबे समय तक बार-बार इस्तेमाल न करें तो सब कुछ याद नहीं रह सकता