CSS border radius madness
Border radius is an excellent addition in CSS3, it helps creating some awesome rounded corner boxes super easy. Modern browsers like Firefox, Safari, Chrome, Opera and IE9 all announced or have already implemented support for “border-radius” property in their CSS engine. Firefox and Webkit have the support in the form of vendor prefixed extension, latest Opera follows the W3C standard, it didn’t introduce any vender prefix even though the CSS3 specification is still being actively worked on, by the way the border-radius is now a CR (Candidate Recommendation) as of today. Well, as you might think that I’ll be talking about how to implement border-radius across different browsers, which in fact I don’t intend to do, as there are already a plenty of good examples that you can find if you do some Googling. Recently, I was playing around border-radius in different browsers and I came across some inconsistencies, which [Continue... ]
How to serve different stylesheets only to Safari and Chrome
Well, as you already know that to support Internet Explorer we often serve different CSS files using IE’s special conditional-comment syntax, which is great in terms of having clean and maintainable stylesheets throughout your application, it also mitigates the need of writing CSS hacks which often makes the stylesheets messy and becomes a maintenance nightmare later. You may argue that serving different CSS files only to IE is certainly not an elegant solution and of course it is not, it still requires that extra effort and extra bandwidth for users of Internet Explorer, but it’s somewhat the most practical or possibly the cleanest solution that you can have. As there’s no way to target other browsers using conditional-comment like thing then how would you do it if you ever(though unlikely) have a need to serve different CSS files to some of the modern browsers? Well, seems like I have a [Continue... ]
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine. CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements — particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the infamous technique in your projects. Read the full article at Smashing Magazine, it contains a ton of links regarding CSS-Sprites, check them out, after that you should have a fair understanding of what it is, and you will be able to optimize your site, which will load faster and also saves [Continue... ]
IE textarea background image problem
Internet Explorer has a problem in setting background image to textarea, the scrolling mechanism as implemented by the browser is buggy while all other browsers handle it properly, IE fails naturally . The problem is if you set a background image to textarea and when you scroll the textarea the background image also scrolls, this behavior is incorrect because as far as I can recall an element background should only scroll with regards to the viewport. The easiest way to reproduce this bug is to use a vertical “sprite” image as the textarea background and set background-repeat to “no-repeat“, background-attachment to “scroll“, also apply position values to display part of image and try to enter multiline text in the box you can see the bug in IE. The only fix is that to set the background-attachment value to “fixed” which eventually solves the problem. This problem may be present in [Continue... ]