CSS Media Types @media

Introduction to media types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Certain CSS properties are only designed for certain media (e.g., the ‘cue-before’ property for aural user agents). On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the ‘font-size’ property is useful both for screen and print media. However, the two media are different
enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Experience also shows that sans-serif fonts are easier to read on screen, while fonts with serifs are easier to read on paper. For
these reasons, it is necessary to express that a style sheet — or a section of a style sheet — applies to certain media types.

Specifying media-dependent style sheets

There are currently two ways to specify media dependencies for style sheets:

  • Specify the target medium from a style sheet with the @media or @import at-rules.

    Example(s):

    @import url("loudvoice.css") aural;
    @media print {
      /* style sheet for print goes here */
    }
  • Specify the target medium within the document language. For example, in HTML 4.0, the “media” attribute on the LINK element specifies the target media of an external style sheet:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <HTML>
       <HEAD>
          <TITLE>Link to a target medium</TITLE>
          <LINK rel="stylesheet" type="text/css"
    	 media="print, handheld" href="foo.css">
       </HEAD>
       <BODY>
          <P>The body...
       </BODY>
    </HTML>

The @media rule

An @media rule specifies the target media types(separated by commas) of a set of rules (delimited by curly braces). The @media construct allows style sheet rules for various media in the same style sheet:

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Recognized media types

A CSS media type names a set of CSS properties. A user agent that claims to support a media type by name must implement all of the properties that apply to that media type.

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types, the parenthetical descriptions are not normative. They only give a sense of what device the media type is meant to refer to.

all
Suitable for all devices.

aural
Intended for speech synthesizers. 
braille
Intended for braille tactile feedback devices.

embossed
Intended for paged braille printers.

handheld
Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print
Intended for paged, opaque material and for documents viewed on screen in print preview mode. 
projection
Intended for projected presentations, for example projectors or print to transparencies.
screen
Intended primarily for color computer screens.

tty
Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel unitswith the “tty” media type.
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media type names are case-insensitive.

Due to rapidly changing technologies, CSS2 does not specify a definitive list of media types that may be values for @media.

Note.
Future versions of CSS may extend this list. Authors should not rely on media type names that are not yet defined by a CSS specification.

Media groups

Each CSS property definition specifies the media types for which the property must be implemented by a conforming user agent. Since properties generally apply to several media, the “Applies to media” section of each property definition lists media groups rather than individual media types. Each property applies to all media types in the media groups listed in its definition.

CSS2 defines the following media groups:

  • continuous or paged.
    “Both” means that the property in question applies to both media groups.
  • visual, aural, or tactile.
  • grid (for character grid devices), or bitmap.
    “Both” means that the property in question applies to both media groups.
  • interactive (for devices that allow user interaction), or static (for those that don’t).
    “Both” means that the property in question applies to both media groups.
  • all
    (includes all media types)

The following table shows the relationships between media groups and media types:

Relationship between media groups and media types
Media Types
Media Groups
 continuous/pagedvisual/aural/tactilegrid/bitmapinteractive/static aural
continuous
aural
N/A
both
braille
continuous
tactile
grid
both
emboss
paged
tactile
grid
both
handheld
both
visual
both
both
print
paged
visual
bitmap
static
projection
paged
visual
bitmap
static
screen
continuous
visual
bitmap
both
tty
continuous
visual
grid
both
tv
both
visual, aural
bitmap
both
Advertisements

Response.Redirect in Classic ASP

Response Object and HTML Encoding

The response object is often used in conjunction with various kinds of coding schemes. No discussion of response would be complete without a discussion of how to “handle” or “escape” special characters. This sample script demonstrates common conversion and transformation commands that make sense to use with the response.write command:

<html><head>
<title>Response object</title>
</head><body bgcolor="#FFFFFF">
<%
' The response object can be used to write text
' but sometimes some functions must be used to transform
' the text instead of sending as is to the browser

response.write "<B>Hyperion</b> by <I>Dan Simmons</i> is a great novel"
response.write "<p>"
response.write server.htmlencode("<B>Hyperion</b> by <I>Dan Simmons</i> is a great novel")
response.write "<p>"

response.write "Joe Smith & Hilda = a team"
response.write "<p>"
response.write server.URLencode("Joe Smith & Hilda = a team")
%>

</body></html>

Response Object – Redirects

The response object can be used to decide what page to send a user to next. Specifically the response.redirect method will work in that capacity. We have made a script formjump.asp that takes advantage of this.

<html><head>
<TITLE>FormJump.asp</TITLE>
</head><body bgcolor="#FFFFFF">
<form action="FormJumpRespond.asp" method="get">
<SELECT NAME="wheretogo">
<OPTION SELECTED VALUE="fun">Fun</OPTION>
<OPTION value="news">Daily News</OPTION>
<OPTION value="docs">ASP IIS3 Roadmap/Docs</OPTION>
<OPTION value="main">MainPage of ActiveServerPages.com</OPTION>
<OPTION value="sample">IIS 3 Sample ASP scripts</OPTION>
</SELECT>
<input type=submit value="Choose Destination">
</form>
</body></html>
The responder that reacts to this form is:

<%response.buffer=true%>
<html><head>
<title>formjumprespond.asp</title>&
<body bgcolor="#FFFFFF">
<%
' My ASP program that redirects to URL
thisURL="http://www.activeserverpages.com"
where=Request.QueryString("Wheretogo")
Select Case where
case "main"
response.redirect thisURL & "/"
case "samples"
response.redirect thisURL & "/aspsamp/samples/samples.htm"
case "docs"
response.redirect thisURL & "/iasdocs/aspdocs/roadmap.asp"
case "news"
response.redirect "http://www.cnn.com"
case "fun"
response.redirect "http://www.dilbert.com"
End Select
response.write "All dressed up and I don't know where to go<br>"
response.write "I recommend --> " & "<br>"
response.write server.htmlencode(thisURL & "/learn/test/res2.asp?where=fun") & "<br>"
response.write "for a good laugh!" & "<P>"
%>
</body></html>

Hover and Active in IE CSS Specification

Pseudo-Classes Fix for Internet Explorer

Despite the fact that it has been almost six years since CSS 2 specification became a W3C recommendation, Internet Explorer, the dominating browser that is being forced
onto unsuspecting public my Microsoft Corporation, still fails to implement pseudo-classes, such as :hover and :active, for all but anchor elements.

Majority of web developers redeem this problem by polluting thier HTML with endless onmouseover and onmouseout handlers. Very few realize that the time Microsoft could not find to create a compliant browser was wasted on development of proprietory features, which often are the way to work around those limitations. In this particular case, while :hover and :active pseudo-classes do not behave as we expect them to on all but
one element, there are Internet Explorer Behaviors to add the desired functionality with little extra work. The scripting of the behavior goes into a separate .htc file which compliant
browsers would not ever see:

IEFixes.htc
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />

function DoHover()
  { element.className += ' hover';
}

function DoActive()
{ element.className += ‘ active’;
}

function RestoreHover()
{ element.className = element.className.replace(/bhoverb/,”);
}

function RestoreActive()
{ element.className = element.className.replace(/bactiveb/,”);
}

The behavior is attached to the desired elements using CSS declaration:

button, tr, td
  { behavior: url('IEFixes.htc');
  }

The .hover and .active classes to be used by IE are
declared along with the :hover and :active pseudo-classes:

button:active, button.active
  { /*Active styles here */}
button:hover, button.hover
  { /*Hover styles here */}

Examples that use hover and active styling

Button

Table
Column 1 Column 2 Column 3
Cell 1:1 Cell 1:2 Cell 1:3
Cell 2:1 Cell 2:2 Cell 2:3
Cell 3:1 Cell 3:2 Cell 3:3

Scroll to bottom of a div

Allow user to scroll and maintain position with “Scroll To Bottom of the  Div” example

Well I am getting tired of being emailed the same question about my entry Scroll To Bottom of a Div. So I sat down in a few minutes I  came up with this. My first attempt used onscroll, but it Opera appears to not  supporet onscroll on a div. So I had to twidle my thumbs and realized I just had  to use the last know position as a reference. Duh…

So how do I keep the scroll position of a div if the user scrolls it and also  allow for it to stick to the bottom?

Put this code in your head:

  var chatscroll = new Object();

  chatscroll.Pane = function(scrollContainerId){
    this.bottomThreshold = 20;
    this.scrollContainerId = scrollContainerId;
    this._lastScrollPosition = 100000000;
  }

  chatscroll.Pane.prototype.activeScroll = function(){

    var _ref = this;
    var scrollDiv = document.getElementById(this.scrollContainerId);
    var currentHeight = 0;

    var _getElementHeight = function(){
      var intHt = 0;
      if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight;
      else intHt = scrollDiv.offsetHeight;
      return parseInt(intHt);
    }

    var _hasUserScrolled = function(){
      if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){
        return false;
      }
      return true;
    }

    var _scrollIfInZone = function(){
      if( !_hasUserScrolled ||
          (currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){
          scrollDiv.scrollTop = currentHeight;
          _ref._isUserActive = false;
      }
    }

    if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight;
    else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight;

    _scrollIfInZone();

    _ref = null;
    scrollDiv = null;

  }

Create a new instance with the name of the div;

var divScroll = new chatscroll.Pane('divExample');

When ever you add something to the div call the method activeScroll

divScroll.activeScroll();

And the magic will occur.

I tested this on Win XP with IE6, Firefox 1.5, Netscape 8.04, Mozilla 1.7.12,  and Opera 8.5.1 with no issues. My MAC testers came through: Safari 2.0.4,  Camino 1.0.2int, Firefox 1.5.0.5, and Opera 9.0.1 are good. Minor issue with  Opera 8.52 and touchpad. I don’t think that is a show stopper.

Eric Pascarello Coauthor of Ajax In Action Moderator of HTML/JavaScript at www.JavaRanch.com Author of: JavaScript: Your Visual Blueprint for building Dynamic  Web Pages

All about conditional comments

One of the most common operations performed in a Web page is to detect the  browser type and version. Browser detection is performed to ensure that the  content presented to the browser is compatible and renders correctly. The  browser type can be detected using many different techniques. Most methods of  browser detection make use of script on the server or client.

This article introduces conditional comments, which offer certain advantages  over scripted browser detection techniques. Conditional comments make it easy  for developers to take advantage of the enhanced features offered by Microsoft  Internet Explorer 5 and later versions, while writing pages that downgrade  gracefully in less-capable browsers or display correctly in browsers other than  Windows Internet Explorer. Conditional comments are the preferred means of  differentiating Cascading Style Sheets (CSS) rules intended for specific  versions of Internet Explorer.

Terminology

The following terms are used in this article.

Term Description
expression A combination of operators, features, and/or values used to form a       conditional statement.
downlevel browser Any browser except Internet Explorer 5 and later versions. For the       purposes of this article, downlevel refers specifically to any       browser or browser version that does not support conditional comments.
uplevel browser Internet Explorer 5 and later versions, which support conditional       comments.
downlevel-hidden A conditional comment block that is ignored by downlevel       browsers. Internet Explorer 5 and later versions render the HTML content       if the expression evaluates to true.
downlevel-revealed A conditional comment block that is parsed by downlevel       browsers. Internet Explorer 5 and later versions also render the HTML       content if the expression evaluates to true.

Benefits of Using Conditional Comments

Conditional comments have certain advantages over scripting methods of  browser detection.

  • Low client-side impact.When a downlevel browser encounters a downlevel-hidden conditional comment,   the browser skips over the HTML inside the comment, and the content elements   are not parsed, downloaded, or rendered. This saves client machine   resources.
  • No script required.Conditional comments do not require scripting and DHTML, and when no   scripting is used in a Web page, no scripting engine needs to be loaded.   Conditional comments are processed during the downloading and parsing phase,   so only the content that is targeted for the browser is actually downloaded.   Conditional comments can be combined freely with other browser detection   techniques.
  • Separate code from detection logic.Using conditional comments, script logic can be separated into smaller and   simpler segments of code, which are easier to maintain and understand. Plus,   code segments are loaded only by the browser version for which they were   intended.
  • Cross-browser.Conditional comments have been around since Internet Explorer 5, but their   use is not restricted to Internet Explorer alone. Conditional comments can be   used to customize content delivered to browsers that support conditional   comments and those that do not.

Syntax of Conditional Comments

The basic syntax of each type of comment is shown in the following table. The  first comment shown is the basic HTML Comment, which is included for the purpose of comparison and to illustrate  the different syntax used by each type of conditional comment.

Comment type Syntax or possible value
standard HTML comment <!– Comment content  –>
downlevel-hidden <!–[if expression]> HTML <![endif]–>
downlevel-revealed <![if expression]> HTML   <![endif]>

The HTML shown inside the syntax block in each of the conditional  comments denotes any block of HTML content, including script. Both types of  conditional comment use a conditional expression to indicate whether the  content inside the comment block should be parsed or ignored.

The conditional expression is formed from a combination of feature, operator,  and/or value, as shown in the following table.

Item Example Comment
IE [if IE] The only currently supported feature is the string “IE”,       corresponding to Internet Explorer.
value [if IE 7] An integer or floating point numeral corresponding to the       version of the browser. Returns a Boolean value of true if the       version number matches the browser version. For more information, see Version       Vectors.
! [if !IE] The NOT operator. This is placed immediately in front of the       feature, operator, or subexpression to reverse the       Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less       than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is       less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is       greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument       is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to       create more complex expressions.
& [if (gt IE 5)&(lt IE     7)] The AND operator. Returns true if all subexpressions evaluate to     true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates       to true.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

Downlevel-hidden Conditional Comments

The following sample shows a downlevel-hidden conditional comment, which  contains a short paragraph of text

<!--[if IE 5]>
<p>Welcome to Internet Explorer 5.</p>
<![endif]-->

The downlevel-hidden conditional comment contains hyphens (“–“) in the  opening and closing tag, similar to the basic HTML Comment. The condition  appears in the opening portion of the tag, and [endif] is placed prior to the  closing portion of the tag. The content is placed inside the comment tags.

Because the first four characters and the last three characters of the  comment are identical to a basic HTML Comment element, downlevel browsers  ignore the HTML content inside the comment block. Since content is effectively  hidden from browsers that do not support conditional comments, this type of  conditional comment is called downlevel-hidden.

If the result of the conditional expression is true, the content inside the  comment block is parsed and rendered by Internet Explorer 5 and later versions.  This behavior makes the downlevel-hidden conditional comment particularly useful  for content that has been specifically designed for Internet Explorer.

The following sample illustrates how a client-side script block can be placed  inside a conditional comment; in this case, a message is displayed in Internet  Explorer 5 and later.

<!--[if gte IE 5]>

alert("Congratulations! You are running Internet Explorer 5 or greater.");

<P>Thank you for closing the message box.</P>
<![endif]-->

In the preceding example, only the major digit of the browser version is  compared because it is the only digit specified in the conditional expression.  To compare both major and minor version numbers, specify both digits. For  further explanation and examples on specifying the browser’s version number, see Version  Vectors.

Downlevel-revealed Conditional Comments

The downlevel-revealed conditional comment enables you to include content in  browsers that do not recognize conditional comments. Although the conditional  comment itself is ignored, the HTML content inside it is not. Internet Explorer  5 and later versions also parse and render the content if the conditional  expression evaluates to true. The downlevel-revealed conditional comment  complements the downlevel-hidden conditional comment.

The following snippet shows a typical downlevel-revealed conditional  comment.

<![if lt IE 5]>
<p>Please upgrade to Internet Explorer version 5.</p>
<![endif]>

When comparing this type of comment to the basic HTML Comment, notice  that there are no hyphens (“–“) immediately after the opening “<!” or  immediately before the closing “>” of the comment block; therefore, the  comment delimiters are treated as unrecognized HTML. Because the browser does  not recognize the downlevel-revealed conditional comment, it does nothing with  it.

Version Vectors

Conditional expressions are often used to determine the version of the  browser. The format of the version vector number must be defined correctly to  obtain the desired result.

When testing the major browser version number, the version vector is an  integer. To check for a minor browser version, follow the version vector by a  decimal point and four digits. For example, the version vector for the release  build of Internet Explorer 5.5 is 5.5000.

In the following example, only the major version number is specified;  therefore, the sample evaluates as true for both Internet Explorer 5 and  Internet Explorer 5.5.

<!--[if IE 5]>
<p>Welcome to any incremental version of Internet Explorer 5!</p>
<![endif]-->

The following test correctly identifies Internet Explorer 5.

<!--[if IE 5.0000]>
<p>Welcome to Internet Explorer 5.0!</p>
<![endif]-->
Note  Internet Explorer 5, which shipped  with Microsoft Windows 2000, has a version vector equal to 5.0002. Therefore,  the conditional expression [if lte IE 5.0000] returns false when evaluated in  the release build of Internet Explorer 5.

Examples

Here are some more examples of  conditional comments.

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->