“Parallaxin'” @ HTML5 Rocks http://disq.us/8c0sd7

A rather wordy but ultimately interesting look at Parallaxing images by Paul Lewis of HTML5 Rocks:

Whether or not you like parallaxing sites is one thing, but what you can say pretty confidently is that they’re a black hole of performance. The reason for this is that browsers tend to be optimized for the case where new content appears at the top or bottom of the screen when you scroll (depending on your scroll direction) and, in general terms, the browsers work best when very little changes visually during a scroll. For a parallax site that’s rarely the case since many times large visual elements all over the page change, causing the browser to do a repaint of the whole page.

His conclusion don’t guess, test is obvious; but thankfully he also provides methods to put this idiom to practice!

H5R’s responsiveness was much better on my BlackBerry Curve (OS7) than my Dual-Core portable running Firefox 17; but looking at the article and what it tries to achieve I think that’s no surprise. The amount of code that’s pulled from syndication alone is eye-watering, thankfully it’s all very pretty!

Thanks Paul!

Related articles

• Unlike Facebook, Famo.us thinks HTML5 rocks. Here is why. (gigaom.com)
• Scrolling Performance (html5rocks.com)
• Tom Schuster: HTML5 download attribute (javascript-reverse.tumblr.com)

Advertisements

CSS3 Sliders

RT @smashingmag: Responsive CSS3 Slider without JavaScript – http://bit.ly/yGefdD

CSS3 Prettiness

RT @csswizardry: Punching holes through web pages http://bitly.com/I4sz47

Removing the Dotted Outline

Usually, this default styling isn’t a big deal. Links are normally active for only a split second before a new page is loaded and the outline is gone. However, there are circumstances where you want to remove this outline.

Responsive, to a fault?

There’s a new show in town, to start without much confrontation, and it’s largely down to the web-code ringmaster Ethan Marcotte (also @beep).

Responsive web-design came about largely due to changing demands of the equally modern web-user.

For example: as it’s more and more likely that this given person will like and be able to view images through their browser (no matter the device they’re using); what happens if you wish to use the same set of images through all screen-sizes? It turns out, just add some CSS:

Well, here’s the good news: that’s very easy to do: img { max-width: 100%; }

The Marcotte-related fun doesn’t stop there…

Thoughts about IE and Max-width

Yes, IE7 (largely) solved the problem regarding its usefulness when MS integrated into IE7, as long as you used a proper DOCTYPE.

Now that Dean Edwards‘ “IE7-js” can work in place, Svend Tofte’s solution involving MS’ Dynamic Properties and Expressions still works appealingly well. Just make sure you follow the article exactly!

CSS Goings-on

I’m quite willingly taking a lot of inspiration from this month’s issue of net magazine (#220), so forgive me if you’ve already read these.

First of all: Competitions

“In December I took over writing the CSS Gallery section. What does that mean for you my fine Nerdary reader? It means that if you make something new (its got to be new) or your friend makes something new or you see something new that has awesomesauce CSS you should let me know on here or on Twitter and maybe I can use it for an upcoming gallery segment!”