Spacing Out on CSS Namespaces. One of my favourite past times is opening up a random email from the CSS mailing list and going down a rabbit hole.
On one rainy day, I found myself staring at the specifications for CSS Namespaces module. Namespaces As Wikipedia defines it, a namespace provides a list of uniquely identifiable elements and attributes in an XML document. Here is how you would define the namespace of an XHTML document: The URL in the code above is simply the name of that namespace and does not refer to an actual location online. CSS Namespaces In 2007, Bert Bos explained why CSS Namespaces were introduced: The Namespaces module is very small, very simple, and probably rarely needed, but just because it is simple, it doesn’t cost much to add it to CSS. For example, SVG shares some common elements (e.g. Usage Using it with HTML 5 HTML5 allows inline SVG and MathML, which means you can style HTML, inline SVG and MathML elements using the same stylesheet.
Selectors Level 3. Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document.
Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document.
This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. Attribute selectors. Home / CSS3 Previews / CSS3 Substring Matching Attribute Selectors The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.
These new selectors are as follows: [att^=val] – the “begins with” selector[att$=val] – the “ends with” selector[att*=val] – the “contains” selector The first of these new selectors, which we’ll refer to as the “begins with” selector, allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with a specified string (e.g. “ “ or “mailto:”). In the same way, the additional two new selectors, which we’ll refer to as the “ends with” and “contains” selectors, allow for the selection of elements where a specified attribute either ends with or contains a specifed string (respectively). How they Work Let’s take a look at each of these new selectors in more detail, including examples to demonstrate how they might be used.
Examples. The CSS3 Test. Media Queries. Home / CSS3 Previews / Media Queries CSS2 added support for the media="screen" way of defining which stylesheet to use for which representation of the data.
CSS3 adds a new feature to this functionality, by adding media queries. Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.” Below are two tests, for min-width and max-width, currently only functional (and thus green) in Safari 3, Opera, and Firefox 3.1 (Alpha). Min-width 640px max-width 1100px. CSS Media Queries & Using Available Space. We've covered using CSS media queries to assign different stylesheets depending on browser window size.
In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file.
Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types.