CSS3 Animated Image Gallery
Custom Themes With Cookies & PHP
Text Clipping Masks With SVGTraditional CSS supported display rules for a limited number of devices, such as all, screen, print, handheld, television, and projector. None of these made any conclusions about the size, orientation, or resolution of the device: a “screen” could be 4 inches wide or 400, and the same presentational rules would apply to both. CSS3 provides an alternate and impressive array of controls that allow you to target style rules to devices with particular capabilities, via media queries:
- <link rel=”stylesheet” type=”text/css” href=”styles.css” />
- <link rel="stylesheet" type="text/css"
- media="only screen and (max-device-width: 480px)" href="styles_h.css" />
In the code above, styles_h.css will only be used by devices that are screen based and have a maximum width of 480 pixels, which happens to be the native resolution of the iPhone. Note that this is device width: if you wished to use a stylesheet that targeted a browser that was minimized to 480 pixels wide, the syntax changes slightly:
- <link rel="stylesheet" type="text/css"
- media="only screen and (max-width: 480px)" href="styles_small.css" />
This rule would work for both smartphones and minimized browsers running on a desktop computer, and is generally considered to be the better option.However, writing separate stylesheets for different media formats and screen sizes is neither practical nor efficient: when the browser loads the page it will access all of the referenced stylesheet files, regardless of the current resolution. These extra HTTP requests will slow the load time of your page. It's usually a far better practice to incorporate all of your designs into a central styles.css stylesheet, using the @media syntax:
- /* standard CSS rules read by all devices and applicable to all resolutions */
- html, body { }
- @media print {
- /* specific CSS rules for print, added only if they conflict with
- the rules above */
- }
- @media only screen and (max-width : 1200px) {
- /* style rules for desktops and laptops with smaller screens,
- again only added if the rules here conflict with those at the top
- of the stylesheet */
- }
- @media only screen and (min-width : 768px) and (max-width : 1024px) {
- /* iPads, most other tablets */
- }
- @media only screen (max-width : 480px) {
- /* most smartphones, including iPhones */
- }
Even without specific @media queries, a website designed to fluid principles will usually scale well when displayed on smaller devices. If you find that this is not the case, the addition of a meta tag in the <head> may help:
- <meta name="viewport" content="width=device-width">
so we don't need the jQuery minimum length anymore:) cool!
