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 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

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. Continue reading CSS Best Practice #4: Understand Selector Specificity for Better Speed and Easier Override

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 wouldn\’t scroll for a few seconds. RockMFR had the solution, which I shall share with you. Continue reading IE7 CSS Pseudo Selector Slowdown?

Aaron Newton\’s Event Delegation for MooTools

I just learned of Aaron Newton\’s Event.Delegate.js and think it is amazing. Why is it amazing?

Event delegation is a common practice where by you attach an event listener to a parent object to monitor its children rather than attach events to all the children. It’s far more efficient when you have numerous items on a page that you want to interact with.

The examples below should give you a better idea how awesome it is.
Continue reading Aaron Newton\’s Event Delegation for MooTools

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 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)

CSS Best Practice #2: Shorthand Properties

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.

Implement Other Selector Engines (e.g. Sizzle or Peppy) into MooTools?

Not too long ago announcements of two new selector engines came on the scene, Peppy by James Donaghue and Sizzle by John Resig. At the time I had a fleeting thought of how cool it would be if MooTools was as fast or faster than Peppy and Sizzle.

Yesterday, Ajaxian tells us that the Dojo Community will vote on whether they implement the Sizzle selector engine instead of using their own.

Just after reading that I thought whether MooTools would benefit from implementing a selector engine instead of using their own. Apparently I was not alone in this thought as Aaron Newton has posted his thoughts and pros/cons. Here\’s my two cents. Continue reading Implement Other Selector Engines (e.g. Sizzle or Peppy) into MooTools?