educational

Using CSS Media Queries

Stephen Yagielowicz

In the world of web development today, one size does not fit all. Indeed, numerous mobile access devices, non-standard platforms, Mac and Windows based computers, projectors, televisions and more, are all used to access our online wares.

Even on the same platform, different uses such as printing may require special styles: for example, it may be desirable to use sans-serif fonts for onscreen display, substituting a more readable serif font when a web page is printed.

CSS media queries let developers specify custom styles for specific tasks and display environments.

Different screen sizes, color depths and display device capabilities may all require addressing, depending upon your markets. Fortunately, CSS media queries make it easy.

According to the W3C (www.w3.org/TR/css3-mediaqueries/), media queries extend the functionality of media types by allowing precise labeling of cascading style sheets.

“A media query consists of a media type and zero or more expressions that check for the conditions of particular media features,” states the W3C website. “Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color.’”

“By using media queries,” W3C explains, “presentations can be tailored to a specific range of output devices without changing the content itself.”

Part of the HTML4 and CSS2 specifications, mediadependent style sheets that target different media types allow users to specify options for on-screen display (“screen”); for printing (“print”); and even to set styles targeting differences in interlaced or progressive scanned televisions (“scan”).

For example, the following code can be added to a web page’selement to call custom style sheets for screen and print:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

Alternatively, one style sheet can hold specifications for multiple media types, simply by including the appropriate styles:

@media screen {* { font-family: arial, sans-serif } }

Mobile developers will appreciate the “orientation” query, which allows switching styles from landscape to portrait mode, while the “aspectratio” media query will make targeting widescreen displays a snap.

Check out the W3C site for copy-and-past access to many advanced usage examples.

Related:  

More Articles

profile

Q&A: Vera Sky Dons the Crown for 2017 XBIZ Best Cam Model

Alejandro Freixes ·
educational

Why It Pays When Cam Models Block Cyberbullies

Mia Saldarriaga ·
opinion

Casey Heart Talks Cam Past, Future

Casey Heart ·
educational

Less Is More for Live Cam Member Promotions

Steve Hamilton ·
profile

Melody Kush Dishes on Camming Career

Melody Kush ·
profile

WIA Profile: Laurie Biviano

Women In Adult ·
profile

Jules Jordan's Ezra Kamer Pushes Boundaries of Tech

Rhett Pardon ·
trends

Paysites Innovate to Maintain Competitive Edge

Stephen Yagielowicz ·
Show More