CSS
Browser parse
first HTML DOM (script or head tags) and CSS Object Model at same time (mashed into render tree) (not 1 to 1), and JS later.
Browser
1) Browser sends an HTTP request for page
2) Web server sends a response
3) Browser converts response data (bytes) into tokens, via tokenization
4) Browser turns tokens into nodes
5) Browser turns nodes into the DOM tree
6) Awaits CSSOM tree construction
I) Construct render tree:
1) Starting at the root of the DOM tree, traverse each visible node.
2) Omit non visible nodes.
3) For each visible node find the appropriate matching CSSOM rules and apply them.
4) Emit visible nodes with content and their computed styles.
5) Finally, output a render tree that contains both the content and style information of all visible content on the screen.
II) Actual painting of the screen:
CSS:
1) Layout (recursive process triggered on entire render tree from global style change, or incrementally where only dirty laid out over),
2) Painting,
3) Compositing (of paint) (uses GPU since faster than CPU)
CSS is "context free". HTML forget to close tag, while HTML is context sensitive.
must give browser valid CSS, else does not work
DOM - page loading.
Opacitity. Index.
Manual CSS linking into the HTML page is hard to remember syntax since many tools do it for you.
CSS is a challenge to debug.
Challenges:
1) Specificity (means applying rules in the correct cascade order).
Performance Considerations:
1) Flex box of CSS more performant that using a floated layout. No float left.
2) JS not best choice for style. CSS properties hook into GPU since faster.
3) CSS can Transform Opacity that uses GPU.
Z-Index (Every element can be in front of or behind every other element in an HTML document).
Key to debugging Z-Index is understanding root stacking context and local stacking context created by properties.
====================================================================
*** TO LINK CSS TO HTML ***
CSS FILE:
div { background-color: #EAF0F6; color: #33475B; border: 3px solid #00A4BD; padding: 5px; }
HTML FILE(S):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyle.css">
</head>
<body>
<h1>External CSS Example</h1>
</body>
</html>
====================================================================
CSS FILE: p { color: red; }
HTML FILE: <p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth.</p>
====================================================================
CSS FILE: h1 { color: blue; }
HTML FILE: <h1>Type selectors</h1>
====================================================================
CSS FILE: span { background-color: yellow; }
HTML FILE: <p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth.</p>
====================================================================
CSS FILE: strong { color: rebeccapurple; }
HTML FILE: <p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot </p>
====================================================================
CSS FILE: em { color: rebeccapurple; }
HTML FILE: <p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi </p>
====================================================================
*** CUSTOM NAME VIA CLASS ***
CSS FILE: .highlight { background-color: yellow; }
HTML FILE: <p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot.</p>
====================================================================
Comments
Post a Comment