Fine Print

CSS media queries are a powerful feature of modern web design that control how content renders based on device characteristics, screen size, and output medium. While primarily used for responsive design, media queries can also hide or reveal content depending on the rendering context - a behavior that has interesting implications for web security and digital forensics. Understanding how CSS can conditionally display content is an important skill for security professionals who inspect web applications.

Understanding CSS Media Queries

CSS media queries allow developers to apply different styles based on conditions like screen width, device type, orientation, and importantly, media type. The @media print rule applies styles only when a page is printed or rendered in print preview. The @media screen rule applies styles only for screen display. This means content can be completely hidden on screen but visible when printed, or vice versa. Properties like display: none and visibility: hidden are commonly used to toggle content visibility between media types.

Hidden Content in Web Pages

Web pages can contain significantly more content than what is visible on screen. Beyond media queries, content can be hidden using CSS properties (opacity: 0, overflow: hidden, positioning off-screen), HTML attributes (hidden), or JavaScript-controlled visibility. During security assessments, analysts must examine not just the visible page but the complete source code and computed styles to identify all content the page contains. Browser developer tools allow emulating different media types and toggling CSS properties to reveal hidden elements.

Web Forensics and Source Analysis

Digital forensic investigation of web pages involves examining HTML source code, CSS stylesheets, JavaScript, and network requests to understand everything a page contains and communicates. This includes analyzing inline and external stylesheets for conditional display rules, inspecting HTML comments for developer notes or forgotten content, and reviewing JavaScript for dynamically loaded or hidden data. These forensic techniques are used in incident response, threat intelligence, and legal investigations involving web-based evidence.