EYECON

When I started to develop on my blog I faced an issue on Firefox. When animating DOMElements with 'overflow' CSS property set to 'auto' inside another DOMElement with 'overflow' set to hidden, Firefox creates all sorts of artifacts. To fix this, all animated DOMElements must have 'overflow' set to 'hidden' and return to 'auto' when animation ends. Since I'm using jQuery this can be done very easy.

$('div.item').css('overflow', 'hidden');

This is OK, but, in time, when the blog post number increase, this query will get slower and slower and it may affect the animation.

Then I got an idea: What if I alter the CSS rules present in document? This may be very quick since the script will not cycle through all elements to set individual style, but just change the CSS rule itself and automatically the elements will inherit that change. So there you have, a small function to alter the CSS rules:

$.alterCSSRule = function(ruleName, props) {
	var styleSheet,
		cssRule,
		selectorStr;
	if (document.styleSheets) {
		for (var i=0; i<document.styleSheets.length; i++) {
			styleSheet = document.styleSheets[i];
			for (var 
				k=0, 
				lng = styleSheet.cssRules ? 
					styleSheet.cssRules.length : 
					styleSheet.rules.length; 
				k <lng; 
				k++) {
				cssRule = styleSheet.cssRules ? 
					styleSheet.cssRules[k] : 
					styleSheet.rules[k];
				selectorStr = cssRule.selectorText + '';
				if (selectorStr == ruleName) {
					for (var j in props) {
						cssRule.style[j] = props[j];
					}
				}
			}
		}
	}
};

And to use this new function ...

$.alterCSSRule.('div.item',{overflow: 'hidden'});

And it is quick, just check this speed test  altercssspeed.html . For this to work properly you must be aware of that inline styles will not be overwritten.

I tested this function so far on:

• Internet Explorer 6 and 7 Win
• Firefox 2 Win
• Opera 9 Win
• Safari 3 Win

Trebuie sa cunosti HTML

Pentru a putea folosi CSS la adevarata valoare trebuie sa cunosti bine HTML si structurarea corecta a codului. Multi vor intampina probleme pentru ca nu stiu nici macar tagurile de baza. Necunoasterea HTML duce uneori la pagini de dimensiuni mai mari si atunci cand traficul facut pe server conteaza ...

Separarea continutului de aspect

Cand lucrezi la proiecte mari si folosesti cu cap CSS economisesti mult timp. Modificari ulterioare de design nu mai presupune editarea de fisiere din programare. Plus sablonarea se face mult mai usor.

Structura facuta cu cap

Daca vrei sa folosesti CSS din plin atunci si structurarea paginilor trebuie facuta corecta. Modificari ulterioare de structura pot echivala cu munca pornita de la 0. O structura facuta corect si bine gandita de la inceput poate asigura pe viitor o usurinta in redesign.

Creativitate

CSS ofera mai mult decat pare. Se poate face orice se facea cu tabele si imagini. Daca se pune putin capul la contributie se pot obtine pagini cu design spectaculos dar cu avatajele mentionate mai sus.