Responsive Techniques
The vast array of devices accessing websites requires a variety of CSS techniques to accurately represent site content. CSS methods that address ever-changing and ever-increasing demands for breadth of site usability are called Responsive Techniques because the website dynamically changes in response to a specific device. Responsive development techniques include:
- Using media query declarations to tailor CSS properties to optimal property values for a type of device
- Adding the HTML tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">to the<head>portion of the website HTML code indicating sizing for viewport width as opposed to device physical screen width - Specifying font and padding size values with em, so that the size can automatically adjust for smaller or larger display sizes
- Describing dimensions using percentages instead of fixed pixel values
Media Queries
Accessing CSS that targets specific device features can be accomplished by using Media Queries. When users connect to a website, a user agent in the browser detects the type of device and communicates that information to the website for use by a CSS media query that is declared. One type of query uses links to external style sheets:
<link rel="stylesheet" href="css/qry.css" />
Another type uses media declarations from within the site's CSS file:
@media only print {margin: 0;}
Both of these methods allow CSS to adapt properties according to the specific device, such as display, margins, borders, padding, backgrounds, font sizes, and font colors.
Progressive Enhancement
Building websites that are accessible to all is the foundation of Progressive Enhancement website development. Encompassing the entire toolbox of site development resources, Progressive Enhancement begins with basic HTML and CSS design techniques using flexible layout principles. Additional flexible developer tools include Bootstrap, FlexBox, and JavaScript. To accommodate varying physical screen display widths, the Progressive Enhancement approach encourages a CSS methodology for displaying site content on smaller and larger device screen sizes. First, the display sizing is set for viewport (see Responsive Techniques above) because some devices use software to alter pixel density. Next, in the site's CSS code, multiple CSS declarations are created with @media queries to discern if the current device falls within specific values representing categories of minimum viewport widths. From within each @media declaration, the unique aspects of each device category are accommodated by CSS properties and values specific to those devices. For example, borders, font sizes, and margins could become larger on devices with larger screens, images can be hidden or their size can be adjusted, and menu items can be collapsed into a column instead of a row. Specific parameters can also be set for print devices, including hiding images, removing backgrounds, and removing color. For speech devices, images can be hidden.