Investigate How CSS Works Behind The Scene

সোমবার, ১২ জুলাই ২০২১, দুপুর ৪:৩৯ সময়

CSS নিয়ে কম বেশি সবার ই Idea আছে। But behind the scene CSS কিভাবে কাজ করে এটা কি আমরা জানি ? well Lets dive into it.

This Article is probably going to be slightly lengthy but One Thing I can Promise You It is going to be totally worth it.

Recapitulation

Internet এ অনেক কিছুই ঘটে থাকে behind the scene যতক্ষণ পর্যন্ত নাহ যে webpage টা আমরা request করেছি তা browser এ load করা শুরু করতে পারে, Things like- http request, domain name ঠিক আছে কিনা তা চেক করা ইত্যাদি। but আমরা এই জিনিশ এ focus করব নাহ instead we are only interested on, কি ঘটে একটা browser এ যখন user কোন একটা page open করে ।

So, আমাদের Starting point টা হল যখন browser initial html file টা load করা শুরু করে এবং তারপর browser এই loaded HTML file টা নেয়, সেটাকে parse করে অর্থাৎ HTML file এর মধ্যে যত code লিখা থাকে তা browser line by line decode করে । From this Process, browser একটি so called Document Object Model(DOM) build করে যেটা মুলত describe করে একটি পুরো web document কে । মানে একটি family tree এর মত যেখানে parents , children, siblings Elements থাকবে HTML এর, মুলত এখানে সেই HYML Decoded Code store থাকবে। 

তখন browser HTML টা parse করবে তখন সে একটি stylesheet ও পাবে যেটা HTML head element এর মধ্যে include থাকে এবং browser এই stylesheets টা ও load করা শুরু একইসাথে । just like the HTML, CSS টা ও একইভাবে HTML এর মত Parse হবে কিন্তু CSS এর Parsing phase টা একটু আলাদা এবং একটু  complex. যদি briefly বলি তাহলে , মুলত CSS টা যখন parse হয় তখন সাধারনত দুইটা জিনিশ ঘটে

                  1.Resolved Conflicting CSS Declaration (Cascade)

                  2.Process Final CSS Values (from relative units to pixels)

  • For example: একটি element এর margin-50% দেয়া হল। এখন সেই 50% একটা smartphone এ একরকম হবে এবং একটা large screen এ অন্যরকম দেখাবে। আর এজন্য ই এই percentage and other relative units calculated হয় শুধু মাত্র user device এর উপর parsing phase এর মধ্যে। যখন এই processing parts এর কাজ শেষ হয়ে যায় CSS এর ও একটি tree structure build হয় যেটা similar to DOM এবং এই structure এর নাম হচ্ছে CSS Object Model(CSSOM) ।

এখন এই HTML Parse and CSS parse একত্রিত হয়ে Create করে একটা Render Tree. and then we have everything to render the page. কিন্তু এই render করার সময় browser ব্যাবহার করে Visual Formatting Model । এই Visual Formatting Model এর Algorithm টা calculate হয় bunch of stuff যেগুলার ব্যাবহার সম্পর্কে আমাদের সবার ই ধারণা আছে । Things like -BOX-Model, Floats and positioning etc. And Visual Formatting Model এর কাজ শেষ হওয়ার পর The website is finally rendered. 

Explore the picture for better understanding:

Techdiary: when Load Up the Page
when Load Up the Page

How CSS is Parsed [ 1.Resolved Conflicting CSS Declaration (Cascade) ]

cascade টা হচ্ছে আমরা যখন একটি element এর মধ্যে একের বেশি CSS Rule apply করি,তাহলে কোন rules টা HTML element এর উপর apply হবে তার সমাধান করা । এই একাধিক CSS rules বিভিন্ন stylesheets থেকে আসে। কারণ CSS declaration different source থেকে আসে । সবচেয়ে common declaration source হচ্ছে যেটা আমরা developers রা লিখি । এই declaration টাকে বলা হয় author declaration. আরেকটা declaration source হচ্ছে  user declaration  যেটা user এর থেকে আসে । যেমন- যখন user browser এর ডিফল্ট font size change করে । Last but not the least, declaration source হচ্ছে default browser declarations যেটা browser default ভাবে সেট করে থাকে । for example: browser এর default font-size: 16px, বা কোন anchor tag এ যদি আমরা কোন style না করি তাহলে browser এ তা blue color থাকে এবং একটি underline ও থাকে । এটাই মুলত browser declaration বা user agent stylesheets.

CSS RULE Terminology:

                                 h1{

                                          text-align: center;

                                      }

Here,

h1 ===> selector

[from Open curly braces to closing curly braces ] ===> Declaration Block

text-align ===> property Name

center ===> property Value;

 text-align: center ===> declaration

so, cascade টা আসলে বিভিন্ন declarations গুলা combined করে specific একটা result টা show করে।

কিন্তু cascade কিভাবে এই conflict গুলা resolved করে ? well, এটা মুলত হয় ৩টি উপায়ে ।

Importance  >  Specificity  >  Source Order

Importance

1.User Declarations !importance

2.Author Declarations !importance

3.Author Declaration

4.User Declaration

5.Default Browser Declarations(user Agent)

list দেখলেই বুঝা জাচ্ছে যে প্রথমে User যদি কোন Declarations !importance mark দিয়ে দেয় তাহলে সেটা apply হবে then Author Declarations !importance, তারপর Author Declaration , user Declaration and finally browser Declaration. সবার last হচ্ছে browser Declaration যার ফলে easily আমরা যেকোনো browser default Declarations গুলা override করতে পারি ।  

যখন বেশিরভাগ সময় ই আমাদের CSS এর Author Declarations এ অনেক conflicting rules থাকবে without having a !important  keyword (কারণ আমরা জানি !important mark দিয়ে CSS লিখা bad practice হিসেবে count হয় এবং এটা আমাদের avoid করা উচিত ) এবং তখন সব declarations গুলা same importance পাবে । তখন কি হবে ? তখন cascade calculate করে specificity and compare them. specificity count হয় left to right. যার number বেশি হবে সে জিতবে এবং সেই style টা apply হবে । cascade এভাবে এই result find করে । 

Specificity

1.Inline CSS

2.Id 

3.classes, pseudo-classes, attribute

4.elements,pseudo elements

Explore the Example calmly - 

Techdiary: HTML Markup
HTML Markup
Techdiary: CSS
CSS
Techdiary: The Result
The Result

Source Order

Now Imagine from the picture, শেষ এর দুইটা elements এর same specificity অর্থাৎ [ (0 1 2 2) & (0 1 2 2) ]  তখন কিভাবে cascade result দিবে ? well, তখন যে declaration টা last e declare হবে, that is the one  will apply. that's it. As Simple as that.

Quick Overview:

1.CSS Declaration যদি !important mark করা থাকে তাহলে সেটা Highest Priority হিসেবে গণ্য হয় ।

2. কিন্তু যদি maintainable code লিখতে চান তাহলে !important keyword টা ব্যাবহার করবেন as a last resource.

3. Inline Style টা সবসময় এ external style থেকে বেশি priority পাবে ।

4. একটি selector এর যদি 1 টি Id  থাকে তাহলে সেটা 1000 Class এর চেয়ে বেশি specific.

5.একটি selector এর যদি 1 টি class থাকে তাহলে সেটা 1000 element এর চেয়ে বেশি specific.

6. The Universal Selector(*) এর সবচেয়ে কম specificity থাকে (0,0,0,0)। 

How CSS is Parsed [2. Process Final CSS Values (from relative units to pixels) ]

অনেক তো হল  CSS Cascade নিয়ে কথা । এখন CSS VALUES কিভাবে processing হয় সেই discussion করা যাক ।

1. সব  CSS property গুলার একটা initial value থাকে । এই value গুলো used হয় যখন আমরা কোন value declare না করি যদি সেখানে কোন inheritance value না থাকে ।( Inheritance নিয়ে অন্য একদিন discuss করবো ) 

2. Percentages এবং relative units like REM, EM  etc.  সবসময় pixel (px) এ convert হয়ে যায় ।

3. Percentages সবসময় measure করা হয় তার parent এর font-size এর ভিত্তিতে যদি font-size specify করতে চাই ।  For Example:

html{font-size:16px;} 

header{font-size:200%}   //the actual value will be 32px;

4. Percentages সবসময় measure করা হয় তার parent এর width এর ভিত্তিতে যদি length(margin, padding etc.) specify করতে চাই । For Example:

header{width: 500px;} 

header-child{padding:10%}  //The Actual Length will be 50px; 

5.em Unit টা সবসময় measure করবে তার parent এর font-size এর ভিত্তিতে যদি font-size specify করতে চাই । For Example:

html{font-size:16px;} 

header{font-size:200%}   //the actual value will be 32px;

header-child{font-size:2em;}  //the actual value will be 32 *2=64px;

6.em Unit টা সবসময় measure করবে তার current font-size এর ভিত্তিতে যদি length specify করতে চাই । For Example:

header{

font-size:200%;  //the actual value will be 32px;

padding:3em;  //the actual value will be (32px * 3) = 96px;   

      }

7.rem Unit টা সবসময় measure করবে তার HTML এর  font-size এর ভিত্তিতে (both font-size or length)। For Example:

html{font-size:16px;}

header{font-size:2rem;}  //the actual value will be (2*16)=32px;

footer{margin:4rem;}  //the actual value will be (4*16)=64px; 

Converting px to Rem:

rem unit এর rules অনুযায়ী আমরা জানি এটা শুধু মাত্র root HTML element উপর depend করে । তাই এটাকে আমরা আমাদের advantage হিসেবে কাজে লাগাতে পারি to make our life more easier. and I can't stress enough that How useful rem units are to us. 

 By default html এর font -size থাকে 16px that means, 1rem=16px;

এখন আমারা যদি HTML element এর মধ্যে font-size:10px করে দেই 16px এর পরিবর্তে তাহলে 1rem =10px হবে।  এখন যেকোনো element এর কোন property value দিতে চাই suppose (padding:2.5rem;) তাহলে 2.5rem হবে (2.5 * 10) = 25px ; অর্থাৎ আমাদের এখন যেকোনো pixel unit কে  10 দ্বারা ভাগ করলে আমারা আমাদের actual rem unit পেয়ে যাচ্ছি । কিন্তু এটা করে আমাদের কি benefit? Nice Question! এটা করলে যখন আমরা responsive করতে যাব আমাদের webpage কে তখন just  html এর overall Font-size smaller screen এর জন্য decrease দিলে full webpage এর entire design change হয়ে যাবে এবং big screen এর জন্য html এর overall Font-size increase করে দিলে কাজ শেষ । everything will be change. হ্যাঁ আমি মানছি  just শুধু html এর overall Font-size change করলে ই webpage responsive যাবে নাহ but believe me, it will reduce so much work from us. and also It's a good practice too for writing code to use relative units like rem.

এখানে শেষ না আমরা আর improve করতে পারি । আমরা root font-size :10px দিয়েছি right. but এটা good practice না কারণ এটা করলে user তার  browser এর ডিফল্ট font-size change করতে পারবে না । I mean change করতে পারবে but overall font-size:10px ই থাকবে । অর্থাৎ user তার browser এর default font-size যদি সেটিংস্‌ এ গিয়ে manually change করে তাহলে কোন effect ই পরবে না।কারণ আমরা তা override করে ফেলসি html এ font-size:10px দিয়ে এইজন্য আমরা এই unexpected Behaviour  টা যাতে না করে সেজন্য আমরা font-size set  করব percentage এ . তাহলে করা যাক । 

default font-size=16px. that means in percentages it is 100% right? এখন user default font size যদি change করে let's say 18 px or 20px বা যেটাই করুক না কেন যেহেতু আমরা 100% করে দিছি তাই font-size ও 18px or 20px হবে অর্থাৎ কোন problem ই হবে না আর ।  

এখন আমরা ত 16px চাচ্ছি না , আমরা চাই 10px যাতে আমাদের calculation করতে কোন জামেলা ই না হয় । 

so, আমরা যদি  (10/16)=.625%  আসে। তাহলে result আসে 62.5%. so আমাদের font-size হবে 62.5% HTML এ । That's it. এখন যদি user তার  font size change করে lets say 20px তাহলে কি হবে? simple .625 *20 = 12.5px; then the font size of the use browser will be 12.5px.

Hopefully, All the explanation make sense to all of you. আশা করি আপনি উপরের theory গুলা ভাল করে বুজলে এবং follow করলে আপনার coding efficiency অনেক increase হবে, তখন আপনি অনেক কম code লিখে অনেক বেশি পরিমাণ কাজ করতে পারবেন ।