Present and layout with Cascade StyleSheets (CSS), Page 2

Media Queries

As an extension to the @media rules, Media Queries adds the ability to apply groups of styles to media with various sub details such as not just to a screen but a colour screen as:

For a range you can use min- and max- prefixes to any of the new terms which include color, width, height, device-width, device-height, aspect-ratio, device-aspect-ratio, color-index, monochrome, orientation and resolution:

Apply to a 24-bit colour screen:

The difference between width and device-width is that width is the width of the webpage (or webpage on paper) and device-width is the width of the screen (or paper).

aspect-ratio:

color-index refers to the number of colours supported in the device's colour table (just like there are 256 colours in a GIF or 8-bit PNG image).

monochrome and orientation respectively provide the number of bits in a monochrome display and whether it is a landscape or portrait display.

Applying styles to a device with a certain amount of dots per inch resolution can be accomplished by:

Mozilla 1.9.1 and Presto supports Media Queries while WebKit and Chromium based support these query features except resolution.

Multiple Background Images

In CSS 3 you can apply multiple background images with a single declaration using the same background-image, background-position and background-repeat properties by using a comma separated list of values each referring to a different background layer. The first value is the top most layer, the second value is the layer under that, third value is for the layer under that and so on.

So far only Mozilla 1.9.2 based like Firefox 3.6, Apple WebKit 525 based like Safari 3, Chromium based like Google Chrome and KHTML 4 based like Konqueror support CSS 3 Multiple Background Images.

2D Transforms

Objects on the webpage or web application, including text, can be transformed such as scaled, rotated, skewed (stretched) and translated using the transform property.

 A transform-origin property with a space separated x value and y value can change the center of the object transformation so that it is not necessarily the very center of the object. Each value can be in typical CSS units including pixels and percentages. Alternatively the x value could be left or center or right and the y value could be top or center or bottom. Such as transform-origin: 25% 35%; making the transform origin at 25% by 35% from the left, top of the object (the default is 50% 50%).

The value of the transform property is usually either one transform function or a space separated list of transform functions.

• Translating: specifies a new location for the origin of the object – effectively moving the content. The translate() function takes an x,y coordinate with units. For instance transform: translate(125px, 125px); changes the origin to 125 pixels by 125 pixels from the previous origin. The second number is optional and if omitted will be zero. Plus a translateX() function just moves the horizontal origin and the translateY() function just moves the vertical origin.
• Scaling: gracefully resizes the object. The scale() function takes an x,y coordinate. For instance transform: scale(2, 2); increases to twice the size or transform: scale(.5, .5); decreases to half the size. The second number is optional and if omitted then is the same as the first. Plus scaleX() only handles the horizontal and scaleY() only handles the vertical sizing or zooming.
• Rotation: rotates the object. The rotate() function takes a number in degrees and the deg unit. For instance transform: rotate(-8deg); rotates 8 degrees anti-clockwise or transform: rotate(18deg); rotates 18 degrees clockwise.
• Stretching: stretches the object. The skew() function takes an x,y coordinate with the deg units to stretch both horizontal and vertical directions of the object. Plus skewX() function takes an angle to stretch horizontally and the skewY() function takes an angle to stretch vertically. For instance transform: skewX(45deg); or transform: skewY(15deg); or even transform: skew(45deg, 8deg);.

 There is a matrix() transform function with 6 values that is the core, advanced transform that will do translations, scaling, stretching and rotation but most authors use the translate(), scale(), skew() and rotate() functions instead.