Always Get Better

Posts Tagged ‘CSS’

Speed Up Page Load By Tricking the Browser

Saturday, November 25th, 2017

Nettiquette is built into web browsers. When you go to download a page, its contents will load in at a max of 2 files at a time (by default). So if there are 12 CSS and JS files, you’ll only get 2 at a time until you load them all.

The good news is you can trick browsers into doing more at a time.

Enter subdomains.

Offload your CSS to css.yoursite.com, and your JavaScript files to js.yoursite.com. Now your website will load 6 files at a time (2 CSS files, 2 JavaScript files, 2 HTML/Image files from your main site).

It doesn’t matter if each subdomain is pointing to the same website. Web browsers go by the site URL and nothing more.

HTTP/2 is supposed to eliminate this problem, of course, but in the meantime doing this helps when you can’t crunch down your files any more.

CSS Sanity: Remember Best Practices When Using New Tools

Monday, February 15th, 2010

Now that the rebellion against IE6 has hit mainstream, a brave new world of CSS3 and HTML5 has been opened to web professionals.

Beware Mixing Purposes
CSS is intended to define the appearance of elements, not their behaviour. Be very careful about “overloading” CSS to accomplish tasks best performed by JavaScript.

A popular example of poor CSS usage is drop-down menu lists. Some web programmers use CSS’ :hover selector to instruct the web browser to display sub-navigation when the user hovers over a list item.

ul#menu li:hover ul { display: block; }

This is much better accomplished using a touch of jQuery:

jQuery("ul#menu ul").css({display: "none"}); // For Opera
jQuery("ul#menu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible", display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});

Not only is this example less dependent on consistent web browser support for the CSS :hover selector, we’ve even thrown in a spiffy little roll-out animation.

Keep It Simple
The nth-child selector is one that stands to be abused by overzealous developers. Imagine this: change the display of every nth element as defined through an algebraic expression.

Why is this a bad thing? CSS is run in the same memory space as the general web page – that’s why it’s so fast. JavaScript tends to be isolated; meaning if you make an infinite loop in JavaScript, the web browser will eventually stop it from running. If the same thing happens in CSS, your web session is probably toast.

Separate Logic from Presentation
CSS was a leap forward because it separated presentation from structure; rather than programming font and colour elements, designers were able to explicitly control the way their web page appeared on screen. HTML was being used to serve the purpose CSS was designed to cover.

More recently, CSS has become a crutch to enable functionality better suited for JavaScript. When unsure about which to use, ask yourself: Does this solution affect only the display, or is some action happening?

BrowsrCamp – Test Web Designs on Mac

Friday, November 13th, 2009

At last, remote desktop has a practical use!

If you are working on a web design and need to see how it will look on Mac, your only choice up until now has been to buy a low-end Mac. That’s an expensive proposition for occasional use. If you’re a web designer by trade you are probably already using a Mac anyway, but for the rest of us there is finally a better choice.

Head on over to BrowsrCamp – for a pittance ($3 gets you 2 days of access) you get to control a machine running OS X.

You can use VNC to connect to the server; if you don’t have or can’t install VNC, BrowsrCamp offers a web interface so you can access the machine directly from your browser.

It’s such a simple, wonderfully executed concept that should be in any programmer’s bag of tricks.