The Document Object Model (DOM) is a structured representation of a webpage, allowing scripts and programs to dynamically access and update content, structure, and styles. When a browser loads a webpage, it creates a tree-like structure where each element (like headings, paragraphs, and images) is a node that can be manipulated. This is crucial for interactive web applications.
The DOM represents an HTML document as a hierarchical tree:
<!DOCTYPE html>
Web accessibility ensures that digital content is usable by everyone, including individuals with disabilities. It encompasses design principles, coding techniques, and legal requirements that remove barriers, allowing users to perceive, navigate, and interact with websites effectively. Beyond compliance, accessibility improves usability and enhances the overall user experience for all individuals.
Web accessibility has evolved through regulations and industry standards, primarily driven by Section 508 of the Rehabilitation Act and the Web Content Accessibility Guidelines (WCAG).
In 1998, the U.S. Congress amended the Rehabilitation Act of 1973, introducing Section 508 to require federal agencies to make electronic and information technology accessible to people with disabilities. It aimed to eliminate digital barriers and
The Holy Grail Layout is a widely adopted web layout structure that consists of a header, footer, main content area, sidebar(s), and navigation. It has been a foundational structure for modern web applications, search results pages, and triage workflows like email clients, social media feeds, and dashboards.
During the early days of web development, achieving a three-column layout with equal-height columns and a flexible central column was notoriously difficult. Web developers relied on CSS hacks, floats, and tables, which were inefficient, difficult to maintain, and often caused layout-breaking issues when content sizes changed dynamically.
CSS Custom Properties, often referred to as CSS Variables, allow developers to define reusable values in CSS. This feature provides a way to store and manipulate values dynamically, improving maintainability, flexibility, and scalability in web design. Unlike preprocessor variables (such as those in SASS or LESS), CSS Custom Properties are native to CSS and can be manipulated in real-time using JavaScript.
CSS Logical Properties provide a way to define layout, spacing, and flow in a direction-independent manner. Instead of using physical properties like left, right, top, and bottom, logical properties adapt to different writing modes, text directions, and locales. This is crucial for supporting multilingual and accessible designs without writing redundant styles.
For example, instead of margin-left and margin-right, we use:
margin-inline-start: 1rem;
CSS provides a range of prefers-* media queries that allow developers to adapt styles based on a user's system preferences. These preferences include reduced motion, dark mode, high contrast, reduced transparency, and more.
In modern web design, users expect websites and applications to respect their system settings out-of-the-box without requiring manual adjustments. Many operating systems and browsers allow users to set preferences for motion, contrast, color schemes, and data usage, and CSS now enables developers to respond to these settings automatically. Implementing these media queries isn't just a good practice—it has become an expected standard for accessibility and user experience.
With increasing support for dark mode across operating systems and browsers, CSS has evolved to provide developers with built-in solutions for handling color schemes efficiently. The color-scheme property and the light-dark() function allow developers to create adaptable themes without complex JavaScript solutions.
The color-scheme property informs the browser whether a page supports light mode, dark mode, or both. This helps browsers render system UI elements (such as scrollbars, form controls, and input fields) in the appropriate theme.
Before CSS gained traction, web developers used HTML tables for layout. This method relied on nesting tables to achieve complex layouts.
<table>, <tr>, and <td> for structuring content.
CSS Nesting is a modern enhancement to CSS that allows developers to write more structured and readable styles by nesting selectors within one another, similar to preprocessor syntaxes like SCSS. This feature improves maintainability and reduces redundancy, making CSS easier to manage.
CSS Nesting has long been a desired feature, inspired by preprocessors such as Sass and Less. However, it was only officially introduced in the CSS Specification as part of CSS Nesting Module Level 1.