DOCSEARCHbyAlgolia
Submit Docs

Carey Ke's Frontend Development Notes

website·Indexed 30 days ago

https://careyke.github.io/blog/

A collection of technical notes and deep dives into frontend development, focusing on HTML and CSS. Topics include the CSS box model, BFC, z-index, stacking contexts, viewport mechanics, and the differences between HTML5 and HTML4, as well as browser storage options like cookie, sessionStorage, and localStorage.

Tokens
15K
Snippets
68
Records
103
Agent score
75%

What's inside Carey Ke's Frontend Blog

  1. Understand why gaps appear between inline-block elements

    Gaps appear between inline-block (and other inline) elements because browsers treat whitespace characters (spaces, tabs, and newlines) in the HTML source code as a single blank character. Since these elements are treated as inline, the browser renders this whitespace according to the white-space property (default is normal), which occupies a specific width based on the current font size.

  2. Understand why CSS selectors are parsed from right-to-left

    Browsers parse CSS selectors from right-to-left to optimize performance when matching styles to DOM elements. During the creation of the render tree, the browser must find which CSS rules apply to each DOM element.

    Parsing from right-to-left is more efficient because the rightmost selector is typically the most specific. By identifying the target elements first and then walking up the DOM tree to verify their ancestors, the browser can quickly discard large numbers of non-matching paths. In contrast, a left-to-right approach would traverse from ancestors down to leaves, often discovering a path is non-matching only at the final element, leading to significant wasted computation and potential page lag.

  3. Understand the purpose and constraints of HTML meta tags

    The <meta> tag is used to define metadata about an HTML document. Metadata describes characteristics of the page (such as author, keywords, and modification dates) that are not rendered visually on the page but are used by browsers and search engines.

    Key constraints:

    1. Meta tags must be placed inside the <head> element.
    2. Common attributes include charset, name, http-equiv, and content.
    3. The charset attribute is used independently, while name and http-equiv must be paired with a content attribute.

  4. Understand Block Formatting Context (BFC) and its rules

    A Block Formatting Context (BFC) is an independent rendering region in a web page that defines how block-level boxes inside it are laid out. Elements inside a BFC are isolated from the layout of elements outside of it. BFC rules apply only to block-level boxes, not inline-level boxes.

    Key BFC Rules:

    1. Isolation: Internal layout does not affect external elements and vice versa.
    2. Vertical Stacking: Block-level boxes are placed one after another vertically.
    3. Margin Collapsing: Adjacent boxes within the same BFC will have their margins collapse.
    4. Containment: Child elements will not overflow the containing block.
    5. Float Avoidance: A BFC region will not overlap with a float region.
    6. Height Calculation: When calculating height, a BFC includes the height of any floating elements within it.

  5. Understand the components of the CSS Box Model

    The rendering engine treats every document element as a rectangular box. A CSS box consists of four distinct parts, layered from the inside out:

    1. Content: The actual content of the element.
    2. Padding: The space between the content and the border.
    3. Border: The edge surrounding the padding and content.
    4. Margin: The outermost space that separates the element from other elements.

  6. Center elements vertically in CSS

    Depending on the child element's display type and height, use the following methods for vertical centering:

    • Inline or Inline-Block elements:
      • If the parent has a fixed height: Set line-height equal to the parent's height on the parent, and vertical-align: middle on the child (required for inline-block).
      • If parent width/height is unknown: Use a pseudo-element on the parent with display: inline-block, height: 100%, and vertical-align: middle, and set vertical-align: middle on the child.
    • Block elements with fixed height:
      • Use absolute positioning with top: 50% and a negative margin-top equal to half the element's height.
      • Use absolute positioning with top: 0, bottom: 0, and margin: auto 0.
    • Block elements with unknown height:
      • Use absolute positioning with top: 50% and transform: translateY(-50%).
      • Use Flexbox on the parent element with align-items: center.
    /* Inline/Inline-block: Fixed parent height */
.father { height: 100px; line-height: 100px; }
.son { vertical-align: middle; }

/* Inline/Inline-block: Pseudo-element method */
.father::after {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}
.son { vertical-align: middle; }

/* Fixed height block: Absolute + Negative Margin */
.mid {
  position: absolute;
  top: 50%;
  height: 200px;
  margin-top: -100px;
}

/* Fixed height block: Absolute + Margin Auto */
.mid {
  position: absolute;
  top: 0px;
  bottom: 0px;
  height: 100px;
  margin: auto 0;
}

/* Unknown height block: Absolute + Transform */
.mid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Unknown height block: Flexbox */
.father {
  display: flex;
  align-items: center;
}

  7. Create complex animations with @keyframes

    The animation property is used for complex animations involving multiple keyframes. Unlike transitions, animations can start automatically without a trigger, can be repeated, and can be paused/resumed.

    Keyframes are defined using the @keyframes rule, where selectors can be percentages (0% to 100%), from (0%), or to (100%).

    @keyframes myAnimation {
  0% { width: 100px; }
  50% { width: 200px; }
  100% { width: 100px; }
}

.element {
  animation: myAnimation 2s ease-in;
}

  8. Prevent layout issues by declaring the HTML DOCTYPE

    The <!DOCTYPE> declaration is used to specify the document type and prevent the browser from switching to 'Quirks Mode' (怪异模式), which can cause inconsistent or unexpected layout rendering. Quirks Mode exists for backward compatibility with websites created before W3C standards were established. By declaring a DOCTYPE, the browser is instructed to use 'Standards Mode' (标准模式) instead of 'Compatibility Mode' (兼容模式).

  9. Remove gaps between inline-block elements using float

    Change the elements from inline-block to floating elements using float: left. Floating elements do not parse the whitespace/newlines between tags, effectively removing the gaps. Note that this introduces the standard complexities associated with floating elements (e.g., needing to clear floats).
    .container span {
  float: left;
}

  10. Determine when to use cookie, sessionStorage, or localStorage

    Choose a storage mechanism based on the intended data lifecycle and communication needs:

    • Cookies: Best for client-server communication, such as maintaining user login sessions and authentication tokens.
    • sessionStorage: Best for temporary data that should survive a page refresh but be cleared once the tab or window is closed.
    • localStorage: Best for persistent data that needs to be shared across multiple tabs or windows within the same origin.

  11. Resolve CSS priority conflicts

    When multiple selectors target the same element, priority is determined by these rules in order:

    1. Specificity Level: Higher levels (e.g., ID) always beat lower levels (e.g., Class), regardless of the number of lower-level selectors.
    2. Total Weight: If selectors are in the same level, the one with the higher combined weight wins.
    3. Order of Definition: If specificity and weight are identical, the rule defined last in the CSS file overrides previous ones.
    4. Proximity: If weights are identical but the delivery method differs, styles defined closer to the element (e.g., inline <style> blocks vs external files) take precedence.

  12. Implement the HTML5 DOCTYPE declaration

    To ensure a webpage renders in standards mode and avoids layout bugs, follow these requirements for the DOCTYPE declaration:

    1. The declaration must be placed on the very first line of the HTML file.
    2. For HTML5, use the simplified <!DOCTYPE html> declaration. Unlike previous versions of HTML (which were based on SGML and required a Document Type Definition or DTD), HTML5 is not based on SGML and only requires this short string.
    <!DOCTYPE html>
<html>
<!-- Page content -->
</html>