What does @media, @font-face and @keyframes mean in CSS?

I was browsing a style sheet of a website that I want to modify and I came across various @media statements. I wondered what they were.


@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }

I got the answer from stackoverflow that it’s a media query that prevents the CSS inside it from being run unless the browser passes the tests it contains, ie used to define different CSS for different screen sizes (in this case).

This is another example from the CSS I was looking at
@media only screen and (min-width:40.063em)

Abstract from the Media specification document (http://www.w3.org/TR/css3-mediaqueries/)

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.

Media-specific style sheets are supported by several user agents. The most commonly used feature is to distinguish between ‘screen’ and ‘print’. (But I guess this will increasingly be applying to screen sizes and making things mob friendly).

What is @font-face?

The same style sheet had a number of occurences of @font-face. “The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.” Good reference here: “How to use @font-face“.

Some other points I’ve picked up from reading:

  1. The @font-face rule should be added to the stylesheet before any styles.
  2. Fonts must have a Web-font licence.
  3. Where possible reduce the size of the font file to download by streamlining the glyph count (see link below)
  4. One of the downsides of @font-face is that you will most likely encounter a brief moment before the page has fully loaded where the default or fall-back font is loaded before the included font file.

This is a useful guide about @font-face: http://www.miltonbayer.com/font-face/

What is @keyframes?

This relates to animation supported by HTML5. Keyframe rule is where you define the animation in CSS3. The keyframe rule will have a name which you apply in an element style definition. Keyframe rules and animation are available only on Mozilla Firefox, Chrome and Safari – in other words, Mozilla and WebKit* based browsers. Internet Explorer and Opera have still not included them in their engines (according to htmlgoodies.com).

*WebKit is a layout engine software component for rendering web pages in web browsers. It powers Apple’s Safari web browser, and a fork of the project is used by Google’s Chrome web browser. WebKit also forms the basis for the experimental browser included with the Amazon Kindle e-book reader, as well as the default browser in the Apple iOS, BlackBerry Browser in OS 6 and above, and Tizen mobile operating systems.

893 Total Views 2 Views Today

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *