Search Stylesheet Selectors with MooTools
You should already know that MooTools has Fx.Morph, that allows you to animate multiple css properties on an element and you can also pass it a selector string so you don’t have to type out all of the properties. Well, you can also pull these properties by using an undocumented method in MooTools, as I [...]
SitePoint’s Andrew Tetlaw on Styling html and body tags
If a page has a background different from it’s content’s background, like most people, I usually begin building a page by styling the body tag with one background and a div container where the content would go with another background. SitePoint’s Andrew Tetlaw wrote up a pretty awesome article on making use of the html [...]
CSS Best Practice #4: Understand Selector Specificity for Better Speed and Easier Override
Understanding the specificity of CSS selectors is important because it makes overriding your previous styles easier. The fastest to slowest selectors also corresponds to how easy it will be to override the cascaded and/or inherited style rules.
IE7 CSS Pseudo Selector Slowdown?
Have you ever experienced major slowdown using IE7? It may NOT be memory related. I came across this issue while working on a bug for GameSpot. Users were complaining that the user experience was lagging. It’s more noticeable with the forums, where the users would drag the scroll bar in long threads, but the page [...]
CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)
I know you’ve done it before. I think we’ve all done it. You have a container with a floated element inside. The container doesn’t wrap around everything, thus causing the element to break outside of the container. To fix this, we’d usually add a clear element at the bottom of the container so it would [...]
CSS Best Practice #2: Shorthand Properties
Write your CSS rules with shorthand properties. It keeps things simple and clean. 1 2 3 4 5 6 7 8 9 10 .example { /* long */ padding-top:1px; padding-right:2px; padding-bottom:3px; padding-left:4px; /* short */ padding:1px 2px 3px 4px; } To help you with the shorthand, Dustin Diaz took the time to put together [...]
CSS Best Practice #1: Reset CSS
I think resetting browser styles is important. You’ll never know what you’re dealing with. If all the browsers start on the same page it will make your life easier because you’ll know what to expect. I personally use Eric Meyer’s Reset CSS as a base and modify it as needed.
CSS Best Practices: Index
I’ve decided to create an index of all the CSS best practices in this post that will be updated when I add a new best practice. It should be easier for you to keep track of everything. Please bear with me while I get things together.
Limitations of CSS Files in IE
If you didn’t know already, IE puts a limit on stylesheet file sizes to cap off at 288Kb. Another limitation I learned from Martin Ivanov’s post is that IE limits the number of stylesheets loaded via link tag or @import to 32 files. Make use of compression and minification if you’ve got large files and [...]
Jon Tan shows how to get @font-face to work on IE
If you’ve designed a website or built one based off of a designer’s vision, you’ll understand the frustration when they don’t want to use a common font and you have to explain why they should. There are a bunch of options of course, like sIFR and CSS image replacement. sIFR requires Flash and javascript, while [...]
keep looking »