Posts Tagged ‘css’

Pure CSS Things

Posted on in WWW.

I’ve had to add them to loads of web pages over the years, but I’m not sure what the proper name for them is. You know, the many-pointed stars / jagged edged circles used to denote special offers or prices. Them. Anyway, yesterday I had to add one to a page and decided to see if I could add it via pure CSS.

And for all browsers except IE8 and lower, I could.

Wow!

.offer-flash {
  background-color: #DE277D;
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate(45deg);
}
.offer-flash:before, .offer-flash:after, .offer-flash b  {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #DE277D;
}
.offer-flash:before {
  transform: rotate(22.5deg);
  z-index: 4;
  content: "";
}
.offer-flash:after {
  transform: rotate(-22.5deg);
  z-index: 4;
  content: "";
}
.offer-flash  b {
  transform: rotate(-45deg);
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  text-transform: lowercase;
  z-index: 5;
}


<div class="offer-flash"><b>Wow!</b></div>

I’ve removed the various prefixed versions of transform for clarity, don’t forget to add them in if you want to support IE9, Firefox 15 or lower, Opera 12 or lower or any Webkit browser.

One caveat is that as the various elements and pseudo-elements overlap each other we can’t add borders or dropshadows to those elements. Borders I’m not going to get into, but dropshadows are possible by wrapping one extra HTML element. (Watch out for the interaction of z-index, position, :before and :after.)

Wow!

.offer-flash-shadow {
  background-color: transparent;
  width: 50px;
  height: 50px;
  position: relative;
  box-shadow:  3px 3px 6px #333;
  z-index: 1;
}
.offer-flash-shadow:before, .offer-flash-shadow:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  box-shadow:  3px 3px 6px #333;
  z-index: 2;
  }
.offer-flash-shadow:before {
  transform: rotate(-22.5deg);
  content: "";
}
.offer-flash-shadow:after {
  transform: rotate(22.5deg);
  content: "";
}
.offer-flash-shadow .offer-flash {
  box-shadow:  3px 3px 6px #333;
  position: absolute;
  z-index: 3;
}

<div class="offer-flash-shadow"><div class="offer-flash"><b>Wow!</b></div></div>
Tags: ,

Sound and fury

Posted on in Blogs, The World, WWW.

The past couple of columns extolling the virtues of Firefox were enough to tell that he was ‘one of us’, but this week Stephen Fry is blogging about the W3C and WHATWG. In fact, this makes a lot of sense, if the W3C’s efforts were to be compared to a gameshow then one, like Mr Fry’s QI, where the contestants regularly end up with a negative points total would be an appropriate analogy.

Recently: Opera takes Microsoft to court, which leads to calls for the CSS Working Group to be disbanded, which is, unsurprisingly, shrugged off by the working group itself, and then Microsoft announces that IE8 passes Acid2.

And as you’d expect there’s been a lot of froth and nonsense across the interested blogs.

My thoughts are that progress is being made, both by people like the the IE team (the current versions of Opera and Safari already pass Acid2 and Firefox 3 will pass it as well) and by the W3C which has made some good efforts this year to be more open and transparent.

It’s good to question the way things are, and Andy Clarke’s post about the working group has certainly made people take a good look at the status quo. But I feel that his proposed alternative would take us back to the time where the W3C created specifications that bore no relation at all to what the browsers were actually doing or planning to do.

As far as Opera and Microsoft goes, this is more about commerical advantage and business models than it is about web standards per se. Opera’s current business model aligns itself with web standards. Microsoft’s business model is so large and complex that it can be both for and against web standards and as the Acid2 result shows the team building IE8 are for them. I think the lawsuit is a sideshow and shouldn’t be allowed to dominate the standards discussion.

For many of us the shenanigans of the CSS working group hold a strange fascination, but I think that Mr Fry is right to point out that it’s in the areas of video and audio that the next big battle will be fought. As such Microsoft aren’t the main bad guys, Apple and Adobe probably are. Going back to business models, these companies are both secretive and fond of closed proprietary solutions. I’m not saying that either of them are evil through and through, but I’d love to see a lot more openness and cooperation from them in 2008.

Anyway, Stephen Fry is blogging about W3C working groups and open source video formats. He’s so one of us.

Tags:

HTML tables for the post-CSS generation

Posted on in WWW.

Recently I had a conversation with a web developer who had never used HTML tables. They’d come into the business after the web standards movement had established itself and had never learnt to use tables. As a consequence they were using divs and CSS floats, etc. to lay out things that could (or even should) have been done with tables and running into the sort of issues you might expect when you use a generic tool to do a specialised job.

So I was wondering if there were other people like this out there, and if so would they benefit from a short tutorial explaining HTML tables from a CSS perspective? Such a tutorial might prove useful for others as well – it might provide an alternative way of approaching the tables-to-CSS transition that some people are still struggling with, and it might help explain just how CSS and tables interact. After all the table elements have their own layout model in the CSS specification and it’s not the easiest thing to grasp.

If I were to write such a tutorial I guess it would fall into two halves. The first half would look at the “simple” table model (table, tr, td and th elements) used for simple data tables and *gasp* layout tables and how their default behaviour compares with the standard CSS box model; whilst the second half would look at the “advanced” table model (caption, col/colgroup and thead/tbody/tfoot plus the accessibility enhancing attributes) and how to build complex data tables.

Anyone interested in seeing this?

Tags:

Legendary

Posted on in Browsers.

I promised a test case for my latest problem and here it is: Gecko’s stubborn legend.

A few things worth noting:

  1. In reality the yellow background will be a gradiant background image within each box, so I can’t just apply the background to the form.

  2. Opera starts out displaying the upper form as FireFox does. The addition of position: relative (with no top, left, etc.) to the styles for legend magically changes that.

  3. IE7 breaks the * html hack so some further work will be needed to align the legend horizontally without breaking things in any other browser.

  4. Gecko doesn’t seem to apply float or display (except display: none;) to legend elements at all.

Tags:

When good browsers disagree

Posted on in Browsers.

A followup to my last post about unobtrusive fieldsets and legends. Safari and Konquerer are applying the relative positioning just as Opera does. But they had already removed all indent on the legend as Gecko does. This is a problem as both Opera and Safari are under constant developement and have good CSS support. So how do we distinguish between them?

There are some CSS hacks that cause code to be treated differently by these browsers but instead of relying on poor CSS parsing in older browsers (as in most IE5 hacks) they rely on parts of the CSS spec that aren’t supported yet (e.g. the :lang hack). But Opera 9.1 or Safari 2.1 might well support them, rendering the hack useless.

And it’s not a case of one browser being wrong, legend elements are somewhat peculiar and the default implementation of their presentation can legitimately vary between browsers.

So unless anyone knows a good way to feed different styles to Opera and Safari (that doesn’t rely on browser sniffing, either via JavaScript or server side languages) all I can suggest is that you either use the negative left margin method and accept that Opera will indent the legends, or use the relative positioning method and accept that Safari will outdent the legends. The former method is probably less risky but irks me as an Opera user.

Tags:

Cross-browser unobtrusive fieldsets and legends

Posted on in WWW.

I was tidying up some web pages (Goodbye single column table, hello unordered list; goodbye multiple level one headings, hello heading hierarchy) when I came across a heading followed by a group of checkboxes. Looks like a fieldset with a legend, I thought, but the page design really wouldn’t be helped by the default presentation of these elements in most browsers. So how make to make these elements completely unobtrusive?
Read the rest of this very true thing…

Tags:

Tags, Clouds and Operas

Posted on in Browsers, WWW.

Looking over the Technorati redesign as plugged by Eric Meyer (same old stuff – nice CSS but fixed width design, fixed font sizes in IE, breaks with only a couple of font size increases in FireFox, minor validation errors) I saw that the Tags page didn’t display properly in Opera 8.01.

The relative frequency of the tags are indicated via nested <em> elements with a CSS style font-size: 1.03em to produce the increased size.

But Opera screws up and rounds the font sizes down. I’ve written up a description of the bug and submitted a bug report to Opera.

Until Opera and/or Technorati do something about this issue there’s a quick fix that Opera users can apply. As Technorati includes id="technorati" on the <body> tag it’s relatively easy to add
#technorati .heatmap em {font-size: 1.06em !important;}
to a user stylesheet and restore the tag coloud to its full glory. The exact size value needed will vary depending on your particular default and minimum font size values.

Moving away from the Opera bug we’re still left with the larger issue. What’s the best way to (a) mark-up and (b) indicate relative importance in various media.

As far as the mark-up goes HTML doesn’t offer us that many options and <em> is probably the best choice. Things are slightly confused by the presence of <strong> – how does strong emphasis relate to multiple levels of emphasis created via nested <em> elements?

By default browsers don’t change their output for nested <em>s so there’s no way short of viewing the source for the user to see the level of importance. For graphical media increasing the font size is one possibility but even when Opera’s shortcomings are ignored this might break down (consider mobile devices for example). In non-graphical media the font-size is meaningless.

Volume or pitch are options in aural media but don’t make for an easy listening experience (this sort of tag cloud is designed for visual skimming and doesn’t really work the same way when listened to linearly; but if a listener chooses to listen to it they should get the same information as the reader, via some means or other).

The best solution I can think of would be to add title attributes to each tag giving the relative level of importance. So a tag surrounded with four levels of <em>s would have title="Level Four" or something similar.

Whilst not ideal (and maybe tag clouds aren’t such a good idea) this does have the advantage that it brings together mark-up, styling and metadata (the <em> elements, the font-sizing and the titles) to reinforce the same message. The message. Ah, that’s the real problem. The relative popularity of the various tags is the message and the message should be in the data not in anything else. But that means turning the funky tag cloud into a boring table. 🙁

Tags:

More cleverness

Posted on in Blogs.

Of course the technique I outlined a few days ago isn’t limited to favicons. It can be used with any appropriate image. I realised that I could make links to Live Journals look exactly like they do on LJ itself by including the following in my CSS.

#content a[href^="http://www.livejournal.com/users/"] {
  background-image: url('http://stat.livejournal.com/img/userinfo.gif');
  padding-left: 20px; background-repeat: no-repeat;
}

Still Gecko only obviously, due to the use of the CSS 3 selector.

What I should do is cobble something together in WP that automatically converts <lj user="foo"> into an appropriate HTML link complete with icon. This is the sort of thing that Live Press was supposed to do but (a) I could never get it working and (b) it hasn’t been upgraded to Word Press 1.5. Time to brush up on my PHP and get hacking.

Tags:

Funky CSS stuff for Gecko browsers

Posted on in Blogs, Browsers.

This grew out of a discussion regarding .ICO files and CSS on alt.html. Now, I made some mistakes in my off-the-cuff suggestion there (I used [att|=val] rather than the correct (and, annoyingly, CSS3) selector [att^=val]. After switching to the correct selector I realised that, even allowing for the simplification supplied by Toby Inkster, this would be Gecko only for now. But it is a nice trick anyway.

In essence what it does is insert a site’s favicon before any link to that site. As CSS doesn’t parse the value of att() it can’t be done on a generic level (it could be done with JavaScript but raises a number of other issues) but it can be done for sites that you link to frequently.

#content a[href^='http://groups-beta.google'] {
  background-image: url('http://www.google.com/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

#content a[href^='http://www.imdb.com'] {
  background-image: url('http://www.imdb.com/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

#content a[href^='http://www.amazon.co.uk'] {
  background-image: url('http://www.amazon.co.uk/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

#content a[href^='http://en.wikipedia'] {
  background-image: url('http://en.wikipedia.com/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}
Tags: