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 just learned from Mark Obcena. How? It\’s very simple as you will see. Continue reading Search Stylesheet Selectors with MooTools
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 tag along with the body tag so I won\’t have to add redundant tags for backgrounds. Continue reading SitePoint\’s Andrew Tetlaw on Styling html and body tags
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. Continue reading CSS Best Practice #4: Understand Selector Specificity for Better Speed and Easier Override
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 wouldn\’t scroll for a few seconds. RockMFR had the solution, which I shall share with you. Continue reading IE7 CSS Pseudo Selector Slowdown?
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 wrap everything within. But there is a better solution, which uses two CSS properties. For this example, I\’ll place the styles inline.. please don\’t hate me. Continue reading CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)
Write your CSS rules with shorthand properties. It keeps things simple and clean.
.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 a CSS shorthand guide. Way to go Dustin! Check the guide for in-depth descriptions, examples, and Dustins \”quirky facts\” (such as shorthand defaults).
SitePoint CSS Reference is another source for shorthand properties, or any property in general, you should/could/would use.
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. Continue reading CSS Best Practice #1: Reset CSS
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. Continue reading CSS Best Practices: Index
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 lots of \’em. Besides, your styles should be reusable so you won\’t have gigantic files.
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 CSS image replacement basically hides the text while an image with the text is placed in the background. Then there\’s the CSS @font-face construct which allows you to use an actual font file. There are two different implementations used between IE and the other popular browsers, and a whole mess about using licensed fonts. Jon Tan informs us by giving a brief background about using licensed fonts and clarifying how to use @font-face in IE. Be warned though; the implementation of using @font-face in IE requires IE conditional comments.
Thank you Jon, for such a great in-depth article. Really nice work.