Archive for the ‘CSS’ Category
- In: browsers | CSS
- 2 Comments
Firefox, Opera, and webkit based browsers (Safari, Chrome) are all purported to be the shizzle when it comes to standards support, but that doesn’t mean they all render the same.
This following CSS chestnut will allow you to address any tweaks you need to make for webkit based browsers without affecting any others:
@media screen and (-webkit-min-device-pixel-ratio:0){
/* webkit rules go here */
}
Opera 9.5 CSS filter
Posted on: June 27, 2008
- In: CSS
- 2 Comments
Opera 9.5 is a nice upgrade, but I found that it’s rendering left a few things on one of the sites I look after a little out of whack. Off I went looking for a CSS filter for Opera 9.5 and came up with this gem:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
/* 7.2 up */
head~body … { /* 9 up */ }
:root … { /* 9.5 up */ }
}
As with all filters, use wisely.
Via: tanreisoftware
CSS2 and CSS3 selectors in jQuery
Posted on: April 29, 2008
- In: CSS | frameworks | JavaScript
- Leave a Comment
Along with dom traversal (ala CSS2), you can also use CSS2 and CSS3 selectors in jQuery. For example:
lb = $('a[rel="lightbox"]');
will get you all the anchor elements in the dom which have the rel="lightbox" attribute. This, however:
lb = $('a[rel*="light"]');
will get you all the anchor elements in the dom which have the substring “light” in their rel attribute.
Opera 8 & 9 CSS filter
Posted on: April 28, 2008
- In: CSS | general web
- Leave a Comment
Unfortunately, things don’t always render the same across all browsers (never have, likely never will). If, for some reason, you need to tweak things only in Opera 8 and 9, this CSS will do the trick:
Not my genius, but I can’t recall where I first found this so I can’t quote the source unfortunately.
/* target Opera */
@media all and (min-width:0px) {
/* target version 9 */
head~body #yui-main p {font-size: 130%;}
/* target version 8 */
body #yui-main p{font-size: 130%;}
}
test early, test often
Posted on: May 10, 2007
- In: CSS | JavaScript | PHP
- Leave a Comment
wrong: write 100 lines of code, test, spend an hour undoing your typo’s and logic bugs
right: write 5-10 lines of code, test, make easy fixes, repeat as often as needed until component is complete.
Develop in more than one browser
Posted on: February 1, 2007
- In: (x)HTML | CSS
- Leave a Comment
One rule I’ve learnt and relearnt over the last 5 years is the need to develop xhtml and css code in more then one browser from the very beginning of a project.
Often the temptation for me has been to stick with my development browser (Firefox with the ‘Web Developer Toolbar’ and ‘Firebug’ extensions) and worry about other browsers ‘later’.
These days I develop in Firefox, Internet Explorer 6 and Internet Explorer 7 as a minimum, with secondary checks in Opera 9 and Opera 8 and basic functionality checks in Internet Explorer 5.5 and 5, Opera 6 and Netscape 6. I know, I know, Mac testing is on the way too and Safari will be one of the primary browsers to test in.
Starting with the ‘big 3’ from the get go has led me to develop leaner, more cross browser CSS with far fewer hacks and kludges then in the past.
Internet Explorer 7 CSS filter
Posted on: January 31, 2007
- In: CSS
- 10 Comments
CSS improvements in IE7 are a great step forward, but the box model calculation still seems a little wonky.
If you do need a filter for IE7 only, use:
* + html { }
For example, if you wanted a red border on your div, but a blue one in IE7 (for whatever tenuous reason), your CSS would look like this:
div { border: solid 1px red;}
* + html div { border: solid 1px blue; }
Note that you don’t seem to be able to use the IE6 and IE7 rules in one declaration – it will confuse IE6 and the * html hack won’t apply:
* html div, * + html div { /* this will NOT work for IE6 */ }
—————-
Looking to improve your CSS skills? I recommend the following:
paul bennett 
recent comments