Yes, you read that correctly – functions. Commonly associated with programming languages, they are also a feature of CSS. Apart from url(), they were rarely used in CSS2; but they are being widely deployed in CSS3.
CSS functions are values used in conjunction with certain types of properties, as will be explained.
CSS 2.1 functions
url()
The url() is used with either the background, list-style-image or border-image properties. They enable the CSS coder to bring an image into the page for either list or background purposes. You may well have been using this without referring to it as a function.
An example:
#wrapper {
background : url(images/photo-one.jpg);
}
The path in url() can be either absolute or relative and is case sensitive.
Counter()
As you are aware it is possible to have two different sort of HTML lists: ordered (ol) and unordered (ul).
For instance, the following CSS code will produce an ordered numbered list:
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>
However, it may be desirable to create a numbered list on block or inline level elements such as headers or paragraphs.
This has particular relevance to academically presented work which requires a very tight structure but one that is easy to navigate and read.
Of course, it is possible to just manually add numbers to the text in the HTML, but this method allows the web designer to add numbers dynamically.
In order to use the counter function you must use the following three properties: counter-reset, counter-increment and content.
Here is the code for number number every single paragraph on a page:
body {
counter-reset: paras 0;
}
p:before {
counter-increment: paras 1;
content: "New Paragraph: " counter(paras, decimal) ": ";
}
To explain the above code, counter-reset always comes first. It is given a name, in this case paras with the subsequent number stipulating that the first occurrence is the number one.
Counter-increment calls the previously named counter-reset and again declares a starting number.
Lastly, in the content property is placed the counter() function. The first variable is the name of the counter-reset being called, the second is the numbering system and which corresponds exactly with the options for list-style-type.
Surely though there can't be an easier CSS syntax for an incremental increase? This feature is common in all programming and development languages with its use in PHP being merely the addition of two plus signs to a variable: $variable++
There are two detailed articles on the counter() function published on the web. Louis Lazaris has written a very comprehensive blog post, CSS Counters: counter-increment and Friends, while David Storey at Opera has written Automatic numbering with CSS Counters.
attr()
There is a commonly used jQuery function called attr(), and, like its jQuery namesake, the CSS function refers to a HTML attribute.
Take a look at the code for this link:
<a href="www.suburban-glory.com" title="This is the title attribute for this link"> Nullam varius convallis accumsan</a>.
The above has two attributes, the href and the title.
If you are unsure what a HTML attribute is then read the W3Schools guide: http://www.w3schools.com/html/html_attributes.asp
Attr() in CSS is a means of content generation and can only be used with the content property in conjunction with the :before and :after pseudo-elements. (Functions, pseudo-elements and the content property – ouch, who said CSS was easy?!)
As the fundamental idea of CSS was to separate presentation and content it may seem a little strange that there is some deliberate muddling between the two, but attr() does have a few useful purposes.
Used with the print media declaration, like below, it allows the full URL to be revealed when a page is printed.
@media print{
a:after{content:" (" attr(href) ") "}
}
This would create the following:
As the above testifies this is useful CSS code as it allows your visitor to take note of full link details when they print off a page (rather than just “click here”).
In the same fashion, they can also be used with HTML accessibility aids such as abbr and acronyms. W3C accessibility guidelines recommend the use of these HTML tags when using abbreviations or acronyms in the text. As an example, UN is an abbreviation of United Nations while an acronym, although being similar, can also be used for informal purposes – ASAP is an acronym of as soon as possible.
Take a look at the following use of abbr:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
On the screen the title is not immediately visible – it is there as an aid for screen readers.
By using the print media query it is possible to print out the full title and not just the abbreviation:
@media print{
abbr:after{
content:" (" attr(title) ") ";
}
Note the concatenation in the string to allow the addition of brackets.
One other possible use is by allowing the URL to be revealed when the hovering over the link.
a:hover:after{
content:" Page: (" attr(href) ") ";
}
Hover over any link in this blog post as a demonstration.
As with most advanced CSS, Internet Explorer support below version 9 is poor or non-existent so don't expect your adventures in attr() to shine in these legacy browsers.
It is planned that the use of the attr() function will be dramatically expanded in CSS3 by allowing it to be used with other properties other than content.
CSS 3 functions
calc()
Get ready to throw out your calculators because soon CSS will enable you to add maths sums to your stylesheets, but it's more than a simple 1+1 feature as will be explained.
The Webkit developers have been working on implementing calc() in their engine since 2007 but at the time of writing there are still no plans to incorporate it into a release. I have no knowledge of programming in C but I imagine it must be quite a nightmare to create due to its complexity.
calc() is present in IE9 beta but there isn't a full implementation as stipulated by the W3C. Unfortunately they haven't added a browser-specific prefix that other browsers do as a matter of routine for experimental CSS. calc() on Firefox can be accessed with -moz-calc() from version 4 onwards.
calc() is particularly useful when it comes to fluid layouts and which are currently undergoing a revival due to design for mobile, and as Internet Explorer is an irrelevancy on the mobile platform designers will soon be free to use this CSS function without worrying about degradation for the legacy browsers.
Here is typical CSS code for a fixed width HTML form layout
form {
font-size : 1.4em;
border : 1px solid #000;
padding : 5px;
width : 465px;
}
legend {
display : block;
padding-bottom : 9px;
}
label {
width : 200px;
float : left;
display : block;
margin-bottom : 9px;
}
input {
width : 200px;
float : left;
display : block;
margin-bottom : 9px;
}
textarea {
margin-bottom : 9px;
width : 455px;
}
input[type="submit"] {
width : auto;
clear : both;
}
Using calc() as below is how a form could be coded for a fluid layout:
form {
font-size : 1.4em;
border : 1px solid #000;
padding : 5px;
margin : 0 10px;
width: -moz-calc(50% - 20px);
}
legend {
display : block;
padding-bottom : 9px;
}
label {
width : -moz-calc(50% - 10px);
margin-right : 10px;
float : left;
display : block;
margin-bottom : 9px;
}
input {
width : -moz-calc(50% - 10px);
float : left;
display : block;
margin-bottom : 9px;
}
textarea {
margin-bottom : 9px;
width : -moz-calc(100% - 10px);
}
input[type="submit"] {
width : auto;
clear : both;
}
Note the addition of the padding and margin measurements in the functions. Potentially, relative or absolute units such as centimeters, pixels or percentages will be able to used, while -moz-calc() allows for standard mathematical operators +, -, * and /.
Admittedly, the use of CSS3 box-sizing in the above example could also achieve the same results but it only uses calc() at its most basic level.
I can guarantee that you will see a multitude of articles written about this function in the coming years. It will be particularly useful when a number of new CSS3 units such as viewport height and width come into play, and when the use of the attr() function is expanded upon.
François Remy on the W3C mailing list gives some examples of the likely possible uses of calc() once CSS3 matures:
Calculating the width of a 'progress' element dynamically:
#example {
width: calc(100% * (attr(value) - attr(min)) / (attr(max) – attr(min))
}
Ensuring a fixed element will be visible:
#example {
position: fixed;
height: 25px; width: 300px;
top: calc(min(500px, 1vh-25px));
left: calc(min(30px, 1wh-300px));
}
The downside of calc() is that while making the job of the web designers easier it will also make the syntax more complicated. It will be an absolute necessity to create well-commented style sheets so as to make your co-workers life easier as the origins of measurements will not necessarily be obvious.
As long as Pesto (Opera) and Webkit (Chrome and Safari) quickly catch up with Gecko (Firefox) I can see the calc() function being widely used for mobile design by the end of 2011. It could be used for desktop design as well as it is easy to create a fallback for Internet Explorer without using conditional comments.
Keep an eye out on how quickly the main browsers are implementing CSS3 by regularly checking the Comparison of layout engines page on Wikipedia.
max() and min()
Lastly, these functions are part of the CSS3 Values and Units module draft dated August 27, 2010 but it's not clear, at the time of writing, whether they will be incorporated into Firefox 4 or any other browser.
Part Two
Part two of this guide will cover the functions for 2-D and 3-D transforms.
