One of the benefits of using HTML and CSS to separate presentation and structure is the ability to present the same content in different ways to different devices. CSS allows this through the use of Media Types and Media Queries.
As the image shows below, this means that one set of styles can be sent to Screen devices and another set can be set to a printer just by specifying the correct media type.
This allows the change of the design of the site based on the contest of where it’s viewed, or restrict the use of certain media specific styles (like page breaks) to the device that understands them.
The most common syntax for declaring mediate types is actually part of HTML.
When using a link tag to link to an external style sheet, the Media Attribute can be used to specify which media type or types the styles apply to. Media types to @import blocks as well as @media blocks can also be applied.
At one time, CSS 2.1 specification listed 10 different media types. Now, I could go through them all, but I’m just going to show the list then go over the ones that are still implemented.
In the right image, all, print, screen and speech are highlighted. Very briefly, “all” tells all user agents to apply the styles. Print is for printers. Screen is for screen-based devices. and speech is for speech synthesizers, such as screen readers.
To further control how styles are applied based on devices we turn to Media Queries and Media Features.
To dig into media queries a little deeper, we’ll take a look the syntax.
The second line is where we’ll focus beginning with the optional “only” or “not” keywords to filter media queries.
“Only” is simply used to filter out media queries from being applied by non-supporting devices. Conforming agents are just told to ignore it, so you’re only going to use it if you’re trying to hide the media query styles from older browsers.
The “not” keyword negates the entire media query. So, the styles would apply to devices that do not meet query expression.
From there, you move on to declaring a Media Type such as “screen” or “print.” You can then use the “and” keyword to add as many expressions as you’d like. These expressions allow you to check for certain media features and even allow you to check for a range of values.
Using media features to filter when styles are applied gives us more flexibility in targeting devices. Rather than targeting a specific type of device, we simply target whether a feature is supported or not. There are a wide range of media features currently available and more are being added.
These are grouped in categories based on screen dimensions, display quality, color, user interaction, environmental and scripting.
On certain media features, like width or height, you can add a minimum and maximum pre-fix to set upper or lower limits on those values. Below is an image of an example of syntax to see how media queries might be used in action.
What the syntax above is communicating is this media query is to be applied if the media device type is “screen” and the max width of the screen is “480 pixels”. This is ideal when targeting mobile devices for smaller screens as it would limit these styles from being applied unless those conditions were met.
Media types give limited control when styles are applied based on the type of device being used by the client. Media queries allow us to further refine that process by creating more narrow focus for when styles are used by using various media features. Basically, what this means is that we have control over how our sites are viewed by multiple devices and how the User sees and interacts with the content.
In the next video of the course, I briefly went over vendor prefixes, which could be useful since at some point I’ll probably come across it’s syntax. However, the syntax for vendor prefixes are different than what I’ve come across thus far in CSS.
Honestly, I didn’t quite understand vendor prefixes because it seemed a little confusing, but I will try to explain it as best as possible.
Vendor prefixes allow browser manufacturers to add support for proprietary features or features that are still in development.
The prefixes all correspond with a browser or browser developer as shown in the image below.
Typically, each vendor prefix includes an abbreviation representing the browser manufacturer, which is surrounded on each side by a dash and followed by the property that they’re going to support.
In the next lesson, I learned more about CSS reset, which is almost like a factory reset for CSS styles. This term is used to describe a collection of styles that designers use to deal with the browsers default style sheets. As mentioned in a previous post, all browsers have a default style sheet that will be applied to the page, if they’re not overwritten by the author’s styles. The below image explains essentially what a CSS reset is designed to do.
There are a couple of basic properties that most CSS resets establish a baseline for.
Now, for the most part, this is the case because there are many different variations of CSS resets out there, and some of them are considerably more complex than others.
To use a reset, you simply add your baseline styles to the top of you making style sheet. It’s important that these styles are the first styles your browsers encounter, as you want to reset the values site-wide, and then go back over them, and overwrite them with the site’s specific styles as shown in the image below.
If these reset styles are added below the site’s custom styles, all the hard work is undone, and the reset values become the site’s styling.
Below are some pros and cons of using a CSS reset:
Now the obvious pro of using CSS reset is that it can make your work consistent from site to site, especially if your used to working with it. This allows you to build your sites without having to remember which items they you need to overwrite and which you don’t. However, it often causes you to do double the work when applying your own styles.
Below is an image that shows a resource for the most popular CSS Reset scripts. This explains a little bit about what a CSS Reset is and how to determine if you need one.