A. J. Edgar Craft

Separating content, presentation, and scripting on the web is crucial to building strong, accessible, and practical web applications. Instead, it's about improving the web experience through progressive enhancement, accurate content representation, and adaptable interactivity across all user agents.

* Please note that this does not apply to scenarios with non-web applications using HTML/CSS/JavaScript to avoid writing unique code across different operating systems.

Progressive Enhancement

The isolation approach guarantees a base user experience. The core content is accessible to all users, regardless of their device or user-agent capabilities. Presentation and interactivity enhancements are added to this core content, offering a richer experience for users with more capable user agents.

Universal Content Representation

Accurately represent content across all user agents, including visual browsers, Morse devices, braille readers, search engines, and potential future user agents like VR and AR. Universal representation ensures that everyone can easily access the information, no matter how they access the web.

Efficient Performance

Splitting content, presentation, and scripting results in efficient content loading for user agents. Each of these elements can be optimized separately, improving overall load times. This separation also enables the caching of presentation files such as CSS, further enhancing performance.

Flexibility Across User-Agents

Isolation allows for flexibility in how content is presented and interacted across user agents. This flexibility ensures that content, presentation, and scripting can adapt to various devices and technologies without compromising access to the base content.

HTML Is Content & Usability Representation

HTML serves as the foundation of web content. It includes titles, paragraphs, quotes, data tables, and other elements, enabling information collection through forms and inputs. HTML emphasizes defining things rather than dictating how they appear, ensuring that content is accessible to all user agents.

Accessibility and Worst-Case Scenarios

HTML that avoids inline presentation and scripting ensures content remains efficiently accessible even in worst-case scenarios. This approach prevents reliance on specific presentations or scripting, making the content properly accessible across all user agents and situations.

Reducing Bloat

Avoiding lengthy and repetitive "utility" and "framework" class names in HTML reduces bloat and enhances accessibility. Preprocessors can handle complex external presentation code outside of HTML with variables and functions. This efficient approach ensures clean and practical content.

Avoid this:

<ul id="mainMenu" class="bg-gray-100 p-4 rounded-lg shadow-lg">
    <li class="mb-2">
        <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
    </li>
    <li class="mb-2">
        <span class="font-bold text-gray-700">Menu Section</span>
        <ul class="ml-4 mt-2">
            <li class="mb-1">
                <a href="#" class="text-blue-500 hover:text-blue-700">Item 1</a>
            </li>
            <li class="mb-1">
                <a href="#" class="text-blue-500 hover:text-blue-700">Item 2</a>
            </li>
            <li class="mb-1">
                <a href="#" class="text-blue-500 hover:text-blue-700">Item 3</a>
            </li>
            <li class="mb-1">
                <a href="#" class="text-blue-500 hover:text-blue-700">Item 4</a>
            </li>
        </ul>
    </li>
</ul>

Work with this:

<ul id="mainMenu">
    <li><a href="#">Home</a></li>
    <li>
        <span>Menu Section</span>
        <ul class="subMenu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </li>
</ul>

Most web browser user agents match CSS selector rules from right to left, prioritizing child elements over parent elements. IDs and classes take precedence over all selectors. Expanding HTML to accommodate this approach only marginally improves performance while significantly increasing file size and load time. Focus on proper HTML semantics and efficiency unless the goal is a complex non-web application with massive DOM elements, CSS rules, and page re-flows inside a file-specific web browser container.

CSS Is Speficially For Visual User-Agents

Web browser user agents utilize cascading style sheets (CSS) to control the visual presentation of web pages, including layout, colors, fonts, graphics, and animations. CSS enables the separation of presentation from HTML content, providing flexibility and allowing for different versions of visual presentation without the need to modify or enlarge the HTML.

Beyond Visualization

It's important to note that presentation encompasses more than just visual elements. Different user agents may utilize various presentation languages, so providing a general description of HTML element contexts and their presentation states using classes and IDs is crucial. This approach guarantees that diverse user-agent applications can effectively utilize the presentation concept.

Caching and Performance

Web browsers and other user agents utilize presentation-file caching to optimize loading times across content pages. This mechanism improves loading speed when users revisit the content. However, inline presentations load with the content every time. One potential but complex workaround is utilizing the progressive web app approach, which relies on scripting.

Optional Convenience

Scripting should only be used as a helpful addition when necessary, not as a primary requirement. The main goal is to ensure that the primary content and functionality are available to a user agent even if the scripting isn't working or blocked.

Flexibility in Interactivity

Isolating scripting from content allows for different interactive applications across various user agents without bloating the HTML. This flexibility ensures that the web content can adapt to other user agents across multiple technologies.

Splitting web content, presentation, and scripting is crucial for providing accessibility, efficiency, and flexibility. By prioritizing progressive enhancement, proper content representation, and efficient performance, web content remains accessible to all users, regardless of their device or user-agent capabilities. This approach improves the user experience and prepares content representation for future technological advancements.