7
iPhone only stylesheet
If you want to include styles that will only apply to an iPhone you can do so by using and @media declaration within your main stylesheet.
@media screen and (max-device-width: 480px){
h2 { font-size:22px; }
}
22
Style hyperlinks by filetype
You’re probably seen those links with the little icons next to them. It might have been a mailto link or a link to a PDF file, but you knew what it was going to be before you clicked on it because it had the small icon next to it.
This is probably because the web designer had included a little trick that styles links based on the content that they point to.
Taking the PDF example, imagine you wanted a small PDF icon to appear automatically to the left of your link. The first thing you need to do is add some padding to the left so that the text doesn’t overlap the icon.
a{ padding-left: 20px; }
Next you’ll want to add the actual icon, so our CSS selector will look like this:
a{ padding-left: 20px; background: url(icon_pdf.gif) no-repeat left; }
The final step is that we only want this to apply to links that point to a pdf file. We don’t want to have to add a class to every PDF link either, we need it to happen automatically.
a[href $='.pdf']{ padding-left: 20px; background: url(icon_pdf.gif) no-repeat left; }
Finished. This selector will now apply to any where the href ends in .pdf.
21
Make nth-child work in IE
Nth-child is one of the most useful pseudo classes that CSS has but the problem is it doesn’t work in any version of Internet Explorer prior to version 9. There are still a lot of people using IE7 and IE8.
Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and advanced attribute selectors in Internet Explorer versions 6 to 8.
All you need to do is download the Selectivizr code and include it in your page like this:
<script type=”text/javascript” src=”[JS library]“></script>
<!–[if (gte IE 6)&(lte IE 8)]>
<script type=”text/javascript” src=”selectivizr.js”></script>
<noscript><link rel=”stylesheet” href=”[fallback css]” /></noscript>
<![endif]–>
The first line, where it says [JS library] refers to one of the common JavaScript libraries. If you’re not already using a JavaScript library, you’ll need to choose one of the following:
- jQuery
- dojo
- Prototype
- Yahoo
- DOMAssistant
- Mootools
- NWMatcher
And that’s it. You can now start putting advanced selectors like nth-child in your CSS and they’ll just work!
Tweet11
CSS Syntax highlighting in nano
If your server’s version of nano doesn’t have syntax highlighting for CSS you can turn it on yourself.
Just edit your nano config file (which may not exist yet):
nano -w ~/.nanorc
And add the following:
syntax “css” “\.css$” color brightred “.” color brightyellow start=”\{” end=”\}” color brightwhite start=”:” end=”[;^\{]“ color brightblue “:active|:focus|:hover|:link|:visited|:link|:after|:before|$” color brightblue start=”\/\*” end=”\\*/” color green “;|:|\{|\}”
Save and exit. The next time you open a .css file your code will be highlighted.
Tip courtesy of the nanosyntax project where you can also find code for HTML and lots of other file types.
Tweet6
Using CSS3 in older browsers
If you want to use CSS3 and HTML5 in older browsers there are a few ways of doing it, but today we are going to focus on something called Modernizr.
Modernizr adds various classes to the <html> element which allow you to target specific browser functionality using your stylesheet.
The simplest example is just as the Modernizr site says;
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
In the example above, the Modernizr JavaScript code will detect if the browser your visitor is using supports multiple backgrounds or not. If it is one of the browsers that does not, Modernizr appends class=”no-multiplegbs” to your <html> element.
Then, it’s up to you to decide what should happen on your site. You can control what users of these older browsers see using the stylesheet and help your site to degrade gracefully.
Tweet22
Alternating row colours (zebra striping)
If you’re looking for a quick and easy way to do pure CSS zebra striping the following code snippet will alternate row colours for you in browsers that support CSS3.
Tweettbody tr:nth-child(odd){ background-color:#ddd; }
21
Change the background colour of selected text
So, you want to override the browser’s default selected text colour? A simple bit of CSS will allow you to change it in most modern browsers (Firefox, Safari, Opera) while not causing any problems for users with IE.
p::selection{ background:#000; color:#fff; }
You’ll see I’ve changed the colour of the text there as well so that it is still legible when the background is black.
I probably don’t need to point out that you can, of course, apply this to any text element and have different colours for headings, links, etc.
Tweet12
An update on selector support
We’ve recently been writing some software for a client that only needs to be accessible on IE7 and Firefox and so I thought I would take the opportunity to use a few selectors that lack of IE6 support would usually prohibit me from doing.
With the advent of IE7 you can now use the child, sibling and attribute selectors – as well as a few others.While IE6 still has a large market share it’s not advisable to use these methods for the core functionality of your site, but why not use them to add additional ‘treats’ for users of more modern browsers? It’s a great way to get used to the concept and application of them.
For a full breakdown of browser support for various css tricks try http://www.quirksmode.org/css/contents.html
Tweet28
Cross browser transparency
Using transparency on your site can often help to bring the page to life. While the CSS 3.0 specification for opacity/transparency isn’t supported by all browsers they often have their own proprietary declarations.
#my-element{
opacity: 0.5;
-moz-opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
Using the example above we have successfully targeted Safari and Firefox 1.5+, earlier Firefox versions and Internet Explorer, respectively.
Tweet