Skip navigation.

Sign up | Lost password? | Help

Posts tagged with "css"

Stupid CSS Mistakes

, , ,

I was just perusing the Opera error console, having a peek at some of the CSS mistakes sites make. Usually it's just full of stupid mistakes that could be easily detected and corrected in seconds, if only the code had been run past the validator.

However, the following gem stood out for me:
vertical-align: right;

Congratulations, http://www.amazon.co.uk/ !

The Latest Opera 9.50

, , ,

The latest Opera 9.50 beta (released yesterday) has got me quite excited from a technical point of view! :D

Firstly, it's added MathML support. Writing fancy math equations used to require images. Now Opera and Mozilla browsers support it natively (IE still requires a plugin).

They've also added HSL colour support. Referring to my Opera 10 Wish List from July last year, I can see that Opera 9.5 is going to just about wipe out my CSS wish-list, except for hsla/rgba colours and border-radius. Surely neither of those is too far off? :wink:

Just above MathML on my old list is "SVG-as-an-image" that's in Opera 9.5 too! I've also noticed that XSLT document() support has been added, which hasn't been an issue for me, I know it's been an annoying issue for many people, so it's good to see that done. Then there's other things like getter/setter :yuck: support in JS, which I know some web sites and JS libraries use.

Opera 9.5 is promising to be a big step forward in web functionality! :hat:

CSS 2.1 becomes a Candidate Recommendation

, ,

In a bit of news that almost slipped past me, was the fact that CSS 2.1 has become a Candidate Recommendation. Again. :D

CSS 2.1 previously became a Candidate Recommendation in 2004, but fell back to Working Draft status. It finally seems everyone has come to an agreement about what should be in CSS 2.1.

This is good news to web site designers. There is now a stable up-to-date spec to refer to that most browser implementations already agree on.

It's also good new for browser implementors. They can now tidy up their CSS 2.1, as no doubt there have been one or two minor changes, then move on to CSS3! :yes:

Opera 9 and the Acid2 Test

, , ,

Opera's claim of their version 9 browser passing the Acid2 test has been called into question. It all started with Acid2 and Opera 9 Problems at webstandards.org. It then spread around a bit.

Much of the questions appear to be over misunderstandings of the way the test operates. That webstandards.org hosts the test itself makes their posting questioning Operas passing all the more disappointing.

Mark Wilton-Jones has a very comprehensive page describing the test itself, and how various browsers handle it: Acid 2 in major browsers.

The majority of the questions arise over the fixed-positioned portions of the test. They don't move when scrolling. This is correct behavior and is expected. Some people have questioned whether the page should scroll at all. After all, the test specifies that the scrollbar should not be visible. If the scrollbar isn't there, then maybe the page shouldn't even be able to scroll? Apparently, Konqueror won't let the page scroll.

My view on this is derived from the Acid 2 Guide (Row 1):

...the row is represented by a p element which is fixed to the window rather than the scrollable canvas. If the Acid2 page is scrolled, the scalp will stay fixed in place, becoming unstuck from the rest of the face, which will scroll

(my emphasis)

If we take the Acid 2 Guide as forming part of the test then it is clear the Acid 2 test expects the page to scroll, and not scrolling could be considered a failure.

The remaining Opera "issues" seem to be:
  • Zooming revealing parts of the checkerboard pattern around the eyes. Zooming may not be part of the test, but it seems to me that Opera is being internally inconsistent - using different zooming algorithms for different parts of the display. Maybe zooming algorithms could be made consistent?
  • Page resizing. Not valid, explained elsewhere.
  • Fit-to-width. Not valid, explained elsewhere.


The general consensus seems to be that Opera 9 does pass Acid 2, and those who think it doesn't are just confused.

CSS Hacking

, , ,

With Opera 9 expected to be released soon, probably at the 20-June Seattle do Opera are putting on, I've been forced to make a decision regarding the way it's totally broken my website's CSS drop-down menus.

It's obviously a rendering bug - the menus are way out of position, and it leaves bits behind. I tried poking at the CSS with extra padding, margin, and borders, but nothing worked.

As it's a regression, and the current code works in every other browser I've been able to test with (IE 5-6, Opera 7-8, Mozilla/Firefox, Safari/Konqueror), I've made the decision to sniff out Opera 9 and block the drop-downs. I'm certain Opera Software will figure things out eventually. Sadly this is a recent regression, the early v9 previews had no such problems. In any case, my site is quite navigable without the menus.

This is the first time I've been forced to sniff out a browser for CSS (not counting Dean Edward's IE7 script I'm using). It took less time to implement it than it has to write this blog entry because I'd already written the tool for the job - my User Agent CSS script. The complete contents of my new hacks.css file:
ul.menu li.submenu ul {
  -uacss-opera_eq_9_00-display: none;
}
My script processes that so that only Opera 9.00 gets "display:none", all other browsers get nothing, so it's "business as usual" for them.

Sometime I might look at the "IE hacks" CSS file I have and see what can be put into this new general hacks file. Hopefully everything. Then I'll have all my hacks in one spot.

New DOM Style Support

,

The latest weekly of the Opera 9 beta had a pleasant surprise - DOM Level 2 Style Sheet support.

That's not to say all the other many things the Opera development team have done aren't any good (far from it), just that there was not even a small hint of this!

As shown at a popular Web Browser Standards Support page, DOM2 Styles are probably the weakest part of Opera's DOM support. Outside of Styles, the DOM features Opera doesn't support, no other browsers support either!

Like anything else shiny and new, I expect it will have a few pointy edges that will smooth off in time, but whatever is there now will be a great start. Things like Protopage are nearly working already (looking good ID'd as Opera or Mozilla, but not working good; working good ID'd as IE, but not looking good - no doubt some scripting issue by the site).

Many kudos to the Opera development team! :hat: :up:

P.S. Please fix whatever has broken my web page CSS menus before O9 goes final. Thanks! :wink:

User Agent CSS

,

For a few weeks now I've been working on the idea of being able to easily send different CSS styles to different browsers. My original need was to send a different display property to the Safari and Konqueror browsers to work around a bug. The end result was my development of a Perl script available on my web site:

http://www.scss.com.au/family/andrew/webdesign/uacss/

My timing of this is rather interesting. The IEBlog has recently posted The demise of CSS hacks. It's becoming more and more obvious that the current widespread use of CSS hacks is not sustainable.

Just a minute while I get up a little higher on my soapbox...

I've always thought that CSS hacks were a bad idea - especially those that rely on parser bugs or other unintended and undocumented behaviour. They were a Pandora's box that should never have been opened. Now we have a whole bunch of people bitching and moaning that Microsoft are fixing their browser hacks without fixing the CSS bugs that had people looking for the hacks in the first place.

I have no sympathy for those people. Maybe I'm being a bit harsh, but I defy anyone to honestly say that designing your software/website so that it relies on bugs for correct operation is a good idea.

Anyway, apart from bug characteristics, there are a few options still available:
  1. User agent sniffing (either server- or client-side)
  2. Conditional comments (only for IE)
It's not a big list! My script does user agent sniffing. User agent sniffing has a reputation for being unreliable, however, server-side scripts have no other options. Done properly, it's really not that bad, it's when you start making assumptions, such as that the presence of "MSIE" in the user agent string says something about ActiveX support (it doesn't), that you run into trouble.

My script is not immune to that sort of trouble either, but it doesn't come from the script itself, rather it comes from lazy and irresponsible web designers who might feel tempted to do:
body {
  -uacss-iewin-display: none;
}
There's not much that can be done about that! Ultimately, my script is just tool. It's all in how you use it. I've included some usage guidelines on my web page. It's my hope that people may find my script useful.

Browser hacks, Part 2

, ,

After getting some feedback and thinking about things more, I've come to a slightly different idea: using vendor prefixes on the properties themselves. My original idea is still OK, just that my ideas have broadened slightly. Instead of just media queries, the existing vendor-specific syntax is used.

The new syntax is limited by the existing CSS grammar. One of my interim ideas for handling browser versions started off with some reasonable-looking syntax, but staying compatible with CSS grammar has ugly-fied it. Here it is:
selector {
  -vnd-property: value;
  -vnd_cmp_ver-property: value;
}
"vnd" is the vendor specific code. The "_cmp_ver" bit is optional. "cmp" is a comparison operator, similar to IE's conditional comments (lt=less than, eq=equals, ne, le, gt, ge). Multiple _cmp_ver's AND together. OR-ing is achieved via multiple declarations. The format of ver by necessity depends on the vendor in question, but a sequence of one or more numbers separated by underscores seems reasonable. Maybe a number starting with a "b" to specify a particular build number. Therefore, fixes can easily be targetted to the precise versions that need them.

Here's an example that would have resolved my problem that started all this:
foo {
  display: inline;
  -khtml-display: inline-block;
}

Benefits
  1. The rules are designed to be ignored, i.e. every user agent apart from the one designed to recognize the specified vendor code will ignore it. The only user agent that can be negatively impacted by this is the one programmed to recognize the particular vendor code.
  2. Self-documenting. One of the major problems with the existing use of CSS hacks is remembering which properties end up applying to which browser.
  3. Easier maintenance. All vendor-specific declarations start with a hyphen. Pretty much every single CSS file I've seen is formatted with one declaration per line. To find one of these means simply looking for lines where the first non-whitespace character is a hyphen. The overriding rules are also capable of being left exactly where they're needed and don't need to be separate from the normal declarations.
  4. Precision. Hacks are delivered to a specific property. Browser sniffing and conditional comments often result in a large set of rules being imported. Over time some of the issues in that set may be fixed, others not. Only parser-bug-reliant hacks can currently easily deliver this level of precision, but relying on parsers bugs just should not be acceptable.

Problems
  1. The validator does not parse vendor-specific extensions correctly, resulting in stylesheets being considered invalid. IMO, they should be considered warnings.
  2. Coordination of vendor IDs. Problems will exist if different vendors choose the same prefix. This is a general problem with vendor-specific prefixes, not my idea specifically.
  3. Rules outliving their usefulness. All hacks will live longer than the problems they solve. One of the problems with browser sniffing is that "corrections" can end up being delivered to browsers that no longer need them, causing problems. My idea shares this problem with all other browser hacks, however, I believe the benefits of my idea outweigh the drawbacks of this problem. If a browser issue is resolved, an appropriate "_lt_ver" can be added to the rule.

Browser hacks

,

Now, this is a good idea!

I bumped into that searching for a way to get some styles only into Safari (still looking, BTW).

I'd change it a little, though. "hack" has such ugly connotations. A quick check of the CSS grammar found that media types follow the "ident" syntax. What that means is that the existing convention for vendor-specific CSS properties may be followed here too, i.e. "-moz", "-o", "-khtml". ("-msie"?)

For example:
@import url(operasp.css) -o-screen,-o-projection;
@import url(mozscreen.css) -moz-screen;

@media -msie-print {
  /* MSIE print styles */
}

<link rel="stylesheet" type="text/css" media="-khtml-all" href="khtml.css" />

I think that looks much better, is consistent with the existing conventions, and allows targetting of styles to specific rendering engines. However, given the original suggestion was made in 2002, I don't hold much hope of this happening soon. :frown:
November 2009
S M T W T F S
October 2009December 2009
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30