Anyone who has been using CSS for any length of time has probably been frustrated by the lack of selector support in Internet Explorer 6. There are quite a lot of cases where a CSS 2.1 selector will let you target elements in all other relevant browsers, but where you, if you want it to work in IE 6, have to add a class or id attribute to the HTML. Well, the market share of IE 6 is now finally at a level where we as developers can say that a site “supporting” IE 6 does not mean “looking pixel perfect”. Fortunately more and more clients understand this as well. IE 7 has been out for well over three years and IE 9 is on the horizon, so I think it’s time to revive those CSS selectors that you never got to use just because IE 6 doesn’t understand them. Here are brief explanations of some of the most useful “forgotten” CSS 2.1 selectors…
Articles in the ‘Tutorials’ Category
-
Forgotten CSS selectors
Posted: 6 months ago in Tutorials
Read More: Forgotten CSS selectors
-
The CSS3 :not() selector
Posted: 6 months ago in Tutorials
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!
Read More: The CSS3 :not() selector
-
iPhone CSS Tips for Building iPhone Websites
Posted: 6 months ago in Tutorials
With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it’s only ever on one resolution and on one OS.
The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. This post will show you some of the basics of developing and designing websites for the iPhone and Mobile Safari…
Read More: iPhone CSS Tips for Building iPhone Websites
-
Multiple Backgrounds and CSS Gradients
Posted: 6 months ago in Tutorials
CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms.
Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting…
Read More: Multiple Backgrounds and CSS Gradients
-
Use CSS3 to Create a Dynamic Stack of Index Cards
Posted: 6 months ago in Tutorials
Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features including DesignLovr we hardly ever see the full potential of what can be achieved with CSS3.Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us.We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition for the dynamic effects and @font-face, box-shadow and border-radius for the styling…
Read More: Use CSS3 to Create a Dynamic Stack of Index Cards
-
How To Provide a Flexible Base for Text
Posted: 6 months ago in Tutorials
Sizing text in pixels can cause many problems for web developers – especially in Internet Explorer. Author Dan Cederholm shows you the best practices for sizing fonts…
Read More: How To Provide a Flexible Base for Text
-
10 Tips for Better Print Style Sheets
Posted: 6 months ago in Tutorials
Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet.
Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.
Also, following tutorials is easier if you have one next to you, with your code editor open on the screen; that way, you don’t have to switch windows every time to look something up.
In this article we’ll point out 10 easy tips that will help you create better print style sheets.
Read More: 10 Tips for Better Print Style Sheets
-
How to Make a CSS Sprite Powered Menu
Posted: 6 months ago in Tutorials
Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results…
Read More: How to Make a CSS Sprite Powered Menu
-
IE Background RGB Bug
Posted: 6 months ago in Tutorials
Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don’t support it will get a solid color version…
Read More: IE Background RGB Bug
-
CSS3 box-shadow and Image Hover Effects
Posted: 6 months ago in Tutorials
The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari (and Google Chrome), using the proprietary -moz- and -webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers…
Read More: CSS3 box-shadow and Image Hover Effects