I work as creative developer for a design and branding agency in London. I’m an advocate of open web standards and creative commons, and live in hope that CSS3 will address some of the limitations of the language (and become a recommendation in my lifetime!).
I blog on technical issues at Broken-Links.com, and my ambition is to one day stop agreeing to work on other people’s sites so I can concentrate on getting my own up to scratch.
Peter Gasston
http://www.broken-links.com
-
PIECES WRITTEN BY Peter Gasston:
-
COMMENTS WRITTEN BY Peter Gasston:
-
The support in IE? Nothing. IE7 barely brings support up to CSS2, so it will be a long time before CSS3 is seen. In their defence, CSS3 is not a W3C recommendation yet; however, it would be nice to see them be a little more proactive. Posted to " A brief introduction to Opacity and RGBA " by Peter Gasston June 14th, 2006 -
Sorry, let me correct that; the majority of CSS2 is now supported, but not all of it; no generated content, no {display: table} (etc). CSS2.1 (and even a few CSS3) selectors are much improved. It's a lot better than IE6, but a long way off Safari, Opera and Mozilla (et al). See here: http://css-discuss.incutio.com/?page=IE7 Posted to " A brief introduction to Opacity and RGBA " by Peter Gasston June 14th, 2006
-
Unless I'm mistaken, the -moz-border-radius (and perhaps -webkit-border-radius) declarations do not match the border-radius CSS3 declaration; in -moz-border-radius you choose only one value, whereas the border-radius draft allows you to choose two values to have more flexibility in the curve. For example; -moz-border-radius: 1em; border-radius: 1em 2em; A good example of why some declarations are not fully implemented yet. Posted to " Why and when browsers prefix CSS3 features " by Peter Gasston June 16th, 2006
-
Opera 8.5 exhibits some very strange behaviour on the text-overflow examples; when you hover the mouse over the boxes, it creates a scroll-bar in place of the box which allows you to scroll along the length of the text. Very odd. Posted to " Added a preview page: text-overflow " by Peter Gasston June 19th, 2006
-
Take a look at the roadmap table here: http://www.w3.org/Style/CSS/current-work#table As you can see, a number of modules have reached the 'Candidate Recommendation' level (that is, they think the specification is good enough but won't recommend it fully until more testing has been done). Only one (Selectors) is near the full 'Recommended' level (in fact, a little overdue). Many of the CSS3 selectors have already been implemented in the latest browsers. Posted to " Added a preview page: HSL color " by Peter Gasston June 21st, 2006
-
A good article, let down by the fact that his latest browser, Opera 9, does not support the @font-face construct! Posted to " @font-face: fonts the way you want them " by Peter Gasston June 22nd, 2006
-
Very interesting. If I could request one feature in CSS(4?), it would be equivalencies; that is, for example: .first { min-height: 100px; } .second { height: (.first); } or: .first { width: 100px; } .second { width: (100% - .first); } Posted to " Interesting Hakon Wium Lie interview " by Peter Gasston July 5th, 2006
-
I love it! Posted to " New header pic " by Peter Gasston July 26th, 2006
-
My wife recently did a course here in London which still included the use of <font> tags, <table> for layouts, etc; it's as if nothing has changed in the last five years.
Posted to " Danish webdesign education " by Peter Gasston August 10th, 2006 -
As I suspected; except my version of Konqueror doesn't seem to support HSLA color. I will have to test further tonight. Posted to " Even more Konqueror CSS3 goodness! " by Peter Gasston October 13th, 2006
-
Very good; I think it could be improved even further, but still very good. I made my own effort a while ago, but it's nowhere near as polished as this. http://about.petergasston.co.uk/css3_tests.htm Posted to " CSS Selectors test " by Peter Gasston October 10th, 2006
-
I've just run 3.5.5 - the same results as 3.5.4 Posted to " CSS Selector test updated " by Peter Gasston October 23rd, 2006
-
I'll test again tomorrow, but I'm fairly certain they have, as my previous tests showed they've implemented partial attribute selectors as well: http://www.css3.info/compatibility-table-css3-selectors Posted to " Variable take-up for IE7 " by Peter Gasston November 24th, 2006
-
It would be helpful if they'd at least support Opacity first... Posted to " IE.next to support CSS3 colours? " by Peter Gasston November 16th, 2006
-
Actually, attribute selectors is one of the few things they have implemented: http://www.css3.info/compatibility-table-css3-selectors Posted to " IE.next to support CSS3 colours? " by Peter Gasston November 16th, 2006
-
There have been a number of complaints about XHTML and the W3C, including the fact that XHTML isn't correctly supported by some browsers and XHTML2.0 isn't backwards-compatible, that it doesn't reflect the needs of website owners, and that the W3C takes too long to decide on new standards. Also, the take-up of XHTML has not been as widespread as was hoped for; many sites still use HTML. For those reasons (and many more), the WHATWG has proposed HTML5, which will introduce a number of new features to build on the existing HTML specification. Well-formatted HTML (with a Strict DTD) is just as good as XHTML in it's current incarnation. Whichever you want to use is up to your personal preference; I myself am tending to move back to HTML after using XHTML for a while. Posted to " Which will come first: CSS3 or HTML5? " by Peter Gasston November 19th, 2006
-
Meant to add: You're right in the fact that the W3C doesn't intend to develop HTML any further; however, the W3C standards are only recommendations, not binding regulations; anyone could come up with rival recommendations, and it depends on the browser developers to implement them. Posted to " Which will come first: CSS3 or HTML5? " by Peter Gasston November 19th, 2006
-
It seems that they used to support it, but I've tried both -o-border-radius and -opera-border-radius and neither works, so it looks as if they've removed support. Posted to " A border-radius solution " by Peter Gasston November 19th, 2006
-
It doesn't rely on indentation, as whitespace in stylesheets is ignored. The example shown here was for the sake of clarity, but the rule is that each string represents a row; "row one" "row two", etc. Posted to " How we'll lay out websites in 2016 " by Peter Gasston November 30th, 2006
-
True; although I hope that by the time 'display-model' is supported, we have border-radius and border-image to do those functions instead. Posted to " How we'll lay out websites in 2016 " by Peter Gasston December 4th, 2006
-
Damn it! That's been up for a week and I didn't notice. Changed, thanks. Posted to " How we'll lay out websites in 2016 " by Peter Gasston December 12th, 2006
-
Thanks for pointing out the error; have changed that now. Posted to " How we'll lay out websites in 2016 - Part Two " by Peter Gasston December 13th, 2006
-
I chose 2016 because it's ten years from now; obviously it's not a firm date, it was a sly dig at the speed which the W3C and Microsoft introduce innovation. Posted to " How we'll lay out websites in 2016 " by Peter Gasston December 13th, 2006
-
I think it may be a little complicated to use at first, but the more I look at it the better it seems to be. It will allow for certain layout styles which are more or less impossible at the moment, which is a good thing. Posted to " How we'll lay out websites in 2016 - Part Two " by Peter Gasston December 13th, 2006
-
Not exactly; CSS3 is still mostly in the discussion stage, although some of the new features - opacity, multi-column layouts, curved borders - have already been implemented by Firefox, Safari, Opera and Konqueror. IE7 does include a few CSS3 selectors, but in the main it just irons out some of the bugs in IE6's CSS2 support. Posted to " A brief introduction to Opacity and RGBA " by Peter Gasston December 14th, 2006
-
My apologies, Karl; I stand corrected. Posted to " Which will come first: CSS3 or HTML5? " by Peter Gasston December 19th, 2006
-
Because IE doesn't support border-radius. It's not intended to be a definitive solution, just to show a way that I used a CSS3 declaration. Posted to " A border-radius solution " by Peter Gasston December 23rd, 2006
-
The stats I used in the article are from 10 different websites, from a personal blog to a large European business, although they're all UK-based. They're not in any way meant to be definitive, but merely reflect a snapshot of an overall general trend. Posted to " The rise of IE7 " by Peter Gasston January 2nd, 2007
-
Hi Jacob, Good work on getting it to validate! However, just because it validates doesn't necessarily mean it's 'right'; IE (especially 6) has issues with margin widths (and more), so by fixing it to display correctly in IE6 means it will still validate, but doesn't work properly across more standards-compliant browsers. In my opinion, you should get the site displaying properly in Firefox and Safari first, IE later. Posted to " The rise of IE7 " by Peter Gasston January 15th, 2007
-
You could try reading a book like this one for good tips: http://www.css3.info/blog/become-a-css-professional-by-reading-one-book/ You can 'turn off' padding and margins on most elements by putting a line like this at the beginning of your style sheet: body, div, p, ul { margin: 0; padding: 0; } That will get rid of most of the serious problems. Some people like to put 'body *' to turn off margin and padding for all elements, but I think that's overkill. Posted to " The rise of IE7 " by Peter Gasston January 15th, 2007
-
That's why I prefer to turn off only margin and padding on the main offenders, rather than every single page element! Posted to " The rise of IE7 " by Peter Gasston January 15th, 2007
-
I wouldn't read too much into the W3Schools stats; they are taken from one site only, with a specialist audience. Posted to " IE7 growth slows " by Peter Gasston February 22nd, 2007
-
There's a list of CSS3 selectors support here: http://www.css3.info/modules/selector-compat Posted to " IE7 growth slows " by Peter Gasston February 21st, 2007
-
The only drawback with using VMWare is that you need a fairly decent processor and lots of RAM; otherwise, yes, a very easy solution also. Posted to " How to use Konqueror without installing Linux " by Peter Gasston February 5th, 2007
-
I'm not sure you got the point of this post, Ferris; I'm not advocating Konqueror over any other browser, or Linux over any other OS, I'm just giving a tip on the best way to see CSS3 in action - and at the moment, the most CSS3-compliant browser is Konqueror. As soon as there's an easier way, I'll post that too. Posted to " How to use Konqueror without installing Linux " by Peter Gasston February 5th, 2007
-
My apologies; I've edited the text to show that link. Posted to " Some CSS3 tools " by Peter Gasston February 16th, 2007
-
Great interview. Just one question: what is a "naamloze vennootschap"??? Posted to " An interview with Veerle Pieters " by Peter Gasston February 4th, 2007
-
Thanks for a very comprehensive reply, David. Just one point: I don't think Opera identifies itself as IE anymore, does it? I think it identifies as Opera first, but can identify as IE on a site-by-site basis. You seem to have done more research into it, so I'm prepared to be corrected. Posted to " The rise of IE7 " by Peter Gasston February 4th, 2007
-
This module is aimed at print media; it deals with automatic page numbering, chapters, etc. I don't think it will impact much on day-to-day web development for a little while yet. Posted to " Updated Working Draft " by Peter Gasston February 15th, 2007
-
I was quite excited about Swift when it was announced, but development seems to have stalled - plus, I don't know how recent it's version of webkit is. Posted to " How to use Konqueror without installing Linux " by Peter Gasston February 6th, 2007
-
Another way is to use Linux; if you don't have an old machine to install on or on a partition of an existing machine, you could use one of the many great live CDs like Kubuntu or Knoppix. Then you can use Konqueror to see all the great new CSS3 features. Posted to " The Prince of CSS3 Selectors " by Peter Gasston February 2nd, 2007
-
What has impressed me most about this browser, even at such an early stage, is the rendering speed; it's lightning fast! A huge improvement. The fact it passes the Acid2 test is nice, although not vital. Some work needs to be done on the anti-aliasing on border-radius (at the moment it's quite blurry), but otherwise I've been very impressed and I'd love to see which features are going to be supported at launch. Posted to " Gran Paradiso 2a - CSS3 Selectors " by Peter Gasston February 9th, 2007
-
If it weren't for the extensions, I'd put Firefox as possibly the third-best browser, behind Safari and Opera. But the extensions are invaluable to me, so Firefox is still my number one. Konqueror is excellent, but doesn't play well with some sites. From what I've seen already of Firefox 3, however, I'd say it could well catapult into first place on release; the new Cairo graphics layer is very smooth, it passes the Acid2 test, and has a lot of CSS3 support. Posted to " KHTML 3.5.6 is the most CSS3-compliant of all " by Peter Gasston January 29th, 2007
-
I know about the Alpha Filter, but it's a proprietary declaration. It's easier than the examples I gave above, but it's still not the best solution, because it adds unnecessary code. Posted to " On opacity and complexity " by Peter Gasston March 1st, 2007
-
I'll be away, unfortunately, so won't be able to take part this year :( Posted to " CSS naked day up ahead! " by Peter Gasston April 3rd, 2007
-
I'd also like variables in CSS; imagine: $red { #f00; } strong { color: $red; border-color: $red; } Posted to " Calculated values and CSS2.2 " by Peter Gasston April 14th, 2007
-
@Anjanesh: You don't. Opera has no border-radius implementation at the moment. Posted to " border-radius: Safari vs Mozilla " by Peter Gasston July 4th, 2007
-
I don't think IE will ever fully support CSS; there are some things, such as generated content, they just don't seem to be interested in. Plus, if your browser supports the same standards as everyone else, why would someone choose yours? Better to support standards up to a point and then ignore the rest and create your own... @zest: Those stats aren't from CSS3.info, they're an average from eight different websites I manage, from a personal blog to a large international company. Two of those sites have very high IE usage, as most big businesses still install IE by default. Posted to " IE7 browser share and IE8 hints " by Peter Gasston May 3rd, 2007
-
You're right, Thiemo, you could do that; this article wasn't intended to be a 'bullet-proof' guide, however, more of a quick example to show what's possible and to get people thinking about how to implement it. There was a lot more I could have done to this menu, but that wasn't really the point. I made the decision to put the hover on the li rather than the a just to show a little difference between IE6 and IE7. Posted to " Graceful Degradation " by Peter Gasston June 28th, 2007
-
Hi David, The rounded corners in the fully enhanced version are done with multiple background images rather than border-radius; any news on whether O9.5 will support multiple background images? BTW, can't wait to see SVG background-image in action! Posted to " Graceful Degradation " by Peter Gasston June 28th, 2007
-
You're absolutely right; I've updated the page to reflect that. Posted to " Graceful Degradation " by Peter Gasston June 28th, 2007
-
I wouldn't recommend an example quite as drastic as this just yet for business clients! However, on personal sites there's no reason why you couldn't do this, and on client sites you could make a more subtle effect. Posted to " Graceful Degradation " by Peter Gasston June 28th, 2007
-
I think the inside of that border IS rendered horribly, but I'm sure if you matched the internal colour to the border it would look great. Firefox 3's corner rendering is better than FF2's, judging by the preview I've been playing with. It probably is safer to stick to images until this gets sorted out, I agree; although, it would be better if we could have multiple background images! Posted to " border-radius: Safari vs Mozilla " by Peter Gasston June 27th, 2007
-
Jorge: The problem is that it won't be ready a year from now; some of it may not be ready years from now. Posted to " Interview: Andy Budd on the future of CSS " by Peter Gasston June 21st, 2007
-
Using type="application/pdf" is semantically better, and therefore better in terms of accessibility. Posted to " Using CSS 3 selectors to apply link icons " by Peter Gasston July 17th, 2007
-
@ Sebastian: IE doesn't support generated content, and perhaps never will; at least this way, IE7 and above will show the icons. Posted to " Using CSS 3 selectors to apply link icons " by Peter Gasston July 16th, 2007
-
Well, I can't really argue with that, nemeseri; however, there are a few different CSS2.1 declarations we've 'adopted' into CSS 3 as they don't yet have widespread (or any) browser support; attribute selectors are one example of this. Posted to " Using CSS 3 selectors to apply link icons " by Peter Gasston July 16th, 2007
-
Good idea, Arjan; a slash or a comma, like font-family uses: border-radius: 5px 20px, 20px, 10px 20px, 20px; I wonder if irregular curves are the way to go, however; the current implementation in Safari is horrible, whereas regular curves come out looking really nice. Posted to " border-radius: Safari vs Mozilla " by Peter Gasston June 19th, 2007
-
You're right, Arjan, that sentence wasn't as clear as I wanted it to be; I've changed it now. Also, the icons were just what was available to me; I wanted to use a keyboard key instead, but there wasn't one! Posted to " Using CSS 3 selectors to apply link icons " by Peter Gasston July 16th, 2007
-
Debates on what icons to use aside, the technique still stands. Posted to " Using CSS 3 selectors to apply link icons " by Peter Gasston July 15th, 2007
-
I've added an example of -webkit-border-radius: 5px 20px to the post; I have to say, the rendering is horrible. I'm not sure if that's because it's Safari for Windows, perhaps someone with an OS X version could try? Posted to " border-radius: Safari vs Mozilla " by Peter Gasston June 19th, 2007
-
I've read that Konqueror supports -khtml-border-radius, but can't find any official confirmation, and can't get it to work. Posted to " border-radius: Safari vs Mozilla " by Peter Gasston June 19th, 2007
-
The sub-menus work fine with your fixes, Nox, thanks.
BTW, for anyone who can't see the example, here are screenshots from Firefox 2, Firefox 3 and Safari 3.
Posted to " A mock-up interface using CSS3 Colour " by Peter Gasston July 30th, 2007 -
It doesn't show the transparency on the menu bar at the top because it uses HSLA, but it does show the transparency on the sub-menu because it uses opacity. Posted to " A mock-up interface using CSS3 Colour " by Peter Gasston July 30th, 2007
-
Looks nice on FF2; my only observations are that the 2nd-level ULs only take on the width of the parent LI, and there is a slight gap at the top of the 2nd-level ULs so the menus sometimes disappear if you don't move your mouse down fast enough. Posted to " A mock-up interface using CSS3 Colour " by Peter Gasston July 30th, 2007
-
Thilo - This is from the announcement:
To make sure that Opera remains the best choice on your platform, we spend a lot of time making Opera feel more integrated with your platform. Mac users can expect a nice new visual look and feel. Opera for Linux will add a QT4 build, so you can easily adjust the skin to match with desktop. There will also be 64-bit Linux/FreeBSD packages made available.
Posted to " Opera 9.5 races ahead with CSS 3 support " by Peter Gasston June 24th, 2007 -
@Joost: What parameters were used to get this result? I find it pretty hard to believe that Safari accounts for 84% of total visits! @Harmen Janssen: It's Google Analytics (http://www.google.com/analytics/) Posted to " Browser shares? 84% Safari! " by Peter Gasston July 12th, 2007
-
@Covarr - I agree with you on that, it doesn't integrate with Windows at all. And remember the complaints from Apple users when Firefox launched, that it looked like a Windows app and didn't intergrate with OS X??? It's still a beta, so hopefully it will be improved before launch. Posted to " Apple releases Safari 3 Beta " by Peter Gasston June 16th, 2007
-
Dave Woods: That's the easiest way to do it now, but I don't think that's the easiest way to do it forever; it's basically a hack. Posted to " Lists to get more decorative " by Peter Gasston August 31st, 2007
-
@Covarr: I haven't tried it out myself, but I read somewhere that there is an option to reduce the amount of smoothing so the fonts don't look so blurry. Also, border-radius is much improved in the Firefox 3 pre-Alphas, as they're now using a new graphics layer (Cairo). Posted to " Apple releases Safari 3 Beta " by Peter Gasston June 16th, 2007
-
@Robin: CSS 3 is a complete revision of the language, and involves a lot of very technical implementation for speech, international languages and accessibility. It's intended to be the definitive version, and as such will have to be thoroughly tested and revised before launch. This could take years. Meanwhile, we have to write extra markup and long strings of CSS in order to achieve what should be very simple functions. The CSS 3 properties proposed for CSS2.2 all have some degree of browser implementation, and so should in theory be simpler to roll out cross-browser. Posted to " What CSS 3 Can You Easily Use Right Now? " by Peter Gasston July 10th, 2007
-
Rounded borders look much nicer in Firefox 3, as it uses a different graphics layer from previous releases. Posted to " Submit your CSS3 designs! " by Peter Gasston June 3rd, 2007
-
We've already got them: http://www.css3.info/modules/selector-compat Although, I neglected to mention selectors. Posted to " What is CSS2.2? " by Peter Gasston July 25th, 2007
-
I've seen it working for myself in David's example - unless it was some elaborate hoax!
Posted to " Resize now works in Gecko (kind of) " by Peter Gasston July 25th, 2007 -
Konqueror is the only browser to currently pass the CSS 3 selectors test with no errors. Posted to " Opera 9.5 races ahead with CSS 3 support " by Peter Gasston June 23rd, 2007
-
Konqueror already has the best existing CSS 3 selectors support, but it would be great to see them support a few more declarations; multiple backgrounds and columns, for example. Posted to " Opera 9.5 races ahead with CSS 3 support " by Peter Gasston June 22nd, 2007
-
@Patrick Kraaij: I use Firefox on Linux, Joost probably uses Safari on Mac, and I'd imagine David uses Opera a fair bit; so, a pretty good mix! Posted to " Browser shares? 84% Safari! " by Peter Gasston July 24th, 2007
-
At the time I wrote this, the W3C hadn't yet announced that they were going to work on the HTML5 spec. Posted to " Which will come first: CSS3 or HTML5? " by Peter Gasston August 10th, 2007
-
That's the thing about most of the existing CSS 3 features: they are mostly cosmetic, and are more about how pages display. It wouldn't be the end of the world if a browser couldn't see opaque backgrounds or curved corners, but the better the browser you have, the better the web looks - if coded correctly, of course. And also, all of the features in the proposed CSS2.2 standard are implemented in at least one browser already; in many cases, there's nothing stopping you from using them right now. You would just have to make sure that your code degrades gracefully, and good coding means you shouldn't need extra stylesheets for that. Posted to " Interview: Andy Budd on the future of CSS " by Peter Gasston June 22nd, 2007
-
Testing it out on Windows now. Con: Doesn't integrate well with Windows look & feel Pros: Beautiful text rendering; very, very fast Posted to " Apple releases Safari 3 Beta " by Peter Gasston June 12th, 2007
-
I had no idea it was coming to Windows - what a pleasant surprise! Posted to " Apple releases Safari 3 Beta " by Peter Gasston June 11th, 2007
-
Mail: The technique does still stand; you can debate the examples I provided all you like, but the technique is still perfectly usable. Posted to " Using CSS 3 selectors to apply link icons " by Peter Gasston July 20th, 2007
-
Interesting; I'm sure this must be only experimental, because it doesn't seem to follow the spec very much! Hopefully the ability to move the text box around will be disabled by default, otherwise it could play havoc with some designs. Still, nice to know there are new features coming. I wonder why this doesn't work on the Preview page? Posted to " Resize now works in Gecko (kind of) " by Peter Gasston July 21st, 2007
-
I should have provided an example... an ordered list with nicely decorative numbers, perhaps? And anything that doesn't involve extra markup is good, right? Posted to " Lists to get more decorative " by Peter Gasston August 30th, 2007
-
@ Natalie: If only it were that easy! Posted to " Lists to get more decorative " by Peter Gasston September 3rd, 2007
-
Apologies; link is fixed now. Posted to " Interview with Håkon Wium Lie [Part One] " by Peter Gasston September 4th, 2007
-
Actually you're right; it's still supported in IE7, albeit only in the EOT format. http://www.microsoft.com/typography/web/embedding/ I've amended the post accordingly. Posted to " Webkit has web fonts support " by Peter Gasston October 4th, 2007
-
@Chris: No, you're right about rotate and skew, my apologies. As for the rest, I've no doubt that they can be used in all sorts of clever ways, but I don't think there's been any call for them from developers; certainly when we've discussed most wanted features here on this blog, animations/transitions have never come up. I'm not against these new features, I just think that there's a lot more that could have been addressed first. Posted to " Webkit introduce more new features " by Peter Gasston October 31st, 2007
-
@ Ain: That link is dead. Posted to " Request: test cases! " by Peter Gasston October 29th, 2007
-
It's hard to tell without being able to actually test it, but I'd imagine that with creative use of the module you'd be able to get the result you want. Posted to " Advanced Layout module gets a refresh " by Peter Gasston October 29th, 2007
-
I'm no Microsoft fanboy, but I do think it's unfair to claim they deliberately won't improve IE. The problem is that IE got so successful that it had a virtual monopoly of the market, and at that point, they made the decision to stop active development. This was on the one hand a blessing (no more browser wars meant a stable platform for developers) and on the other, a curse; there were too many bugs in the rendering engine. With no serious competition for a few years, companies built whole suites of web apps to work in IE - including the bugs. The reason that MS can't suddenly make a bells-and-whistles standards-compliant browser and roll it out to everyone is that it would potentially break all those web apps and leave many unhappy customers. I know it's a pain in the arse and leaves us all frustrated, but it's not a deliberate plan of MS to have a poor browser. Posted to " Latest updates to CSS 3 modules " by Peter Gasston September 29th, 2007
-
Punishing people for using IE is not an answer to the problem. By all means, code your site with graceful enhancement to take advantage of more standards-compliant browsers, but visitors using IE should get a good experience as well. Far better to explain the advantages of not using IE, and provide feedback to Microsoft on what is urgently needed. Posted to " Latest updates to CSS 3 modules " by Peter Gasston September 28th, 2007
-
Ummm... perhaps we should point out that the 'killing' would be done in a strictly figurative way. Posted to " Kill IE6 to let CSS3 live " by Peter Gasston September 13th, 2007
-
@John: That should be easier to do with SVG backgrounds, which shouldn't distort as much when resized. I've yet to seriously test it, however. Posted to " Liquid faux columns with background-size " by Peter Gasston September 19th, 2007
-
@Daniel: No, I'd forgotten to upload the most recent example! I don't have a copy of Safari 3 to hand right now, but that should work now. Posted to " Liquid faux columns with background-size " by Peter Gasston September 19th, 2007
-
This is embedding regular TTF files, AFAIK. .eot has been more or less discontinued, as far as I can see; the website hasn't been updated for four years, and the programme to convert fonts isn't made for Windows XP. Added to this, the other browser manufacturers have shown no interest in the proprietary format, perhaps due to licensing issues. For now, I'll happily accept TTF & OTF. Posted to " Webkit has web fonts support " by Peter Gasston October 4th, 2007
-
@David: Sorry, I meant to say "over the next few months", not weeks; I've changed that now. Posted to " CSS Snapshot 2007 released as a working draft " by Peter Gasston October 22nd, 2007
-
You know what I think would be a great way to head off a lot of problems with people using fonts illegally and in un-usable ways? DON'T IMPLEMENT @FONT-FACE IN WYSIWYG EDITORS. That way you won't get amateurs - and I mean that in a strictly non-demeaning sense - filling sites with ugly or unlicensed fonts. Anyone who knows about font licensing and design could still use @font-face by coding it manually, but fewer garish and illegal fonts would make it online. Posted to " Webkit has web fonts support " by Peter Gasston October 7th, 2007
-
First, you'll no doubt be able to switch this feature off. Second, I can't imagine it getting widespread use beyond titles and headings, at least in the long term. Third, if a site is unreadable the feedback will soon let the owner know. Posted to " Webkit has web fonts support " by Peter Gasston October 9th, 2007
-
David: Do you really consider Opera to be a smaller browser? :) Posted to " Bert Bos on CSS3 " by Peter Gasston October 25th, 2007
-
"I’m sure Firefox won’t be far behind with implementing this." AFAIK, Gecko 1.9 (the engine used in the next release of FF) is now frozen for features, and text-shadow is NOT in there; therefore, I don't think we'll be seeing it until at least FF4, unless there's an interval release between the two. The only notable CSS features I've seen confirmed for FF3 are display: inline-block, and rgba/hsla colors. http://developer.mozilla.org/en/docs/Firefox_3_for_developers#CSS Posted to " New text-shadow demo " by Peter Gasston October 11th, 2007
-
"Aside from the piracy issue, the major hurdle for implementation is security." I'd say that was a browser maker problem, not an end-user problem. Posted to " Webkit has web fonts support " by Peter Gasston October 12th, 2007
-
Isn't it just "congratulations to the WebKit team" rather than "at Apple"? As I understand it, a lot of this work comes from the KHTML team moving back into the project. Apologies if this is not the case. Posted to " Webkit passes the CSS Selector Test " by Peter Gasston February 11th, 2008
-
The object problem wasn't fixed in IE7, unfortunately, so it still displays images with a huge border around them, and scrollbars; not ideal. Posted to " Image Replacement in CSS3 " by Peter Gasston February 10th, 2008
-
Rather than get caught up in who earns bragging rights for reaching the milestone first (and I think the first browser to make a release with a 100% score should get that!), what we should be celebrating is that browser makers are taking standards and interoperability seriously and that rendering quirks are becoming a thing of the past. We all win when that happens. Posted to " Opera overtakes Safari in Acid3 race, reaches 100% " by Peter Gasston March 26th, 2008
-
I don't believe that unbundling is the solution, and I don't believe it will come to that. I think that what Opera want is the option to have their browser - or anyone else's - available upon install, or as a clear option. The problem is that most people don't know and don't care what a browser is; they just 'switch on the internet', so there's no incentive for them to learn about the advantages of different browsers. MS have always escaped censure by saying that IE is integrated into the OS and can't be removed; I believe that's why they always claim that they can't release standalone versions. If that's the case, then a possible solution would be to have a Wizard on first connection to the internet, which asks you what browser you would like to use then downloads it for you. Posted to " Opera files antitrust complaint against Microsoft " by Peter Gasston December 14th, 2007
-
@ Haruka: Like most of the quick tutorials I write here, this is really just a concept rather than the finished article! You're right that it would involve downloading all images, so probably wouldn't be suitable for large or multiple images. Posted to " Making an image gallery with :target " by Peter Gasston February 13th, 2008
-
Firefox 2 got to 50/100 with some strange graphics, Safari 3 (Windows) made it to 40/100; IE6 just sat there looking at me rather dumbly. Posted to " Acid3 browser test completed, available now " by Peter Gasston January 30th, 2008
-
Thanks, Mick; word-wrap and media queries pages have been updated. Posted to " CSS3 support in Firefox 3.1 " by Peter Gasston July 28th, 2008
-
If you set the top margin to a negative value, the tooltip hovers above the div and the browser's own tooltip doesn't hover over the top of it; doesn't solve the problem of having duplicated tooltips, however. Anyway, interesting stuff, James. Posted to " Tooltips with CSS3 " by Peter Gasston February 29th, 2008
-
Thanks for the feedback, guys; both pages are updated now. I've added an @font-face preview, too. Posted to " Firefox developers accelerate CSS implementation " by Peter Gasston June 17th, 2008
-
I was pretty excited when I heard about Swift, but it's nowhere near ready for use, and development on it is very, very slow. I'd rather Apple used some of the design sense they're fabled for and realised that they need to tone down Safari for Windows. Posted to " 2008: the year of the layout engine " by Peter Gasston January 2nd, 2008
-
@mediter: Safari's brushed chrome look fits nicely into the OS X look & feel, but on Windows it looks like a squat, grey monstrosity. It feels clunky and awkward. Posted to " 2008: the year of the layout engine " by Peter Gasston January 2nd, 2008
-
@ Pavel Lovtsevich - I think that probably depends on how many people are using Vista when IE8 is released. Posted to " 2008: the year of the layout engine " by Peter Gasston January 3rd, 2008
-
I'm not sure how frequently this draft is updated, but there's a new version dated January 14th available now; seems to be the same as what you've written, however. Posted to " Progress on CSS3 marches on " by Peter Gasston January 18th, 2008
-
@Asa: I'm not complaining about FF3, as I think the faster layout engine and better font rendering is a huge improvement already, but compared to the improved CSS 3 implementation - which is what we concentrate on here - in the latest Webkit & Presto engines, I think FF3 is slightly behind. Posted to " 2008: the year of the layout engine " by Peter Gasston January 3rd, 2008
-
@Stifu: I really don't want to sound as if I'm knocking Firefox, as it's still my browser of choice and FF3 is even better. However, in terms of CSS 3 implementation, it's lagging slightly. Also, FF3 is now feature complete, whereas Opera 9.5 will most likely have more features added to it before launch - including RGBA, I believe. border-radius is a little contentious at the moment as there are two different implementations of it, although the Mozilla implementation looks set to be the standard. Posted to " 2008: the year of the layout engine " by Peter Gasston January 4th, 2008
-
@ Erik: It's in the release notes: "Adds support for SVG images in
elements and CSS images" Posted to " Safari 3.1 pushes CSS3 support forward " by Peter Gasston March 19th, 2008
-
But with little effort and ingenuity, and ample use of @media queries, they could make this for ALL mobile users, optimised for those with better CSS implementation. That's the point of standards. We don't make a website for OS X and a website for Windows. Posted to " Level 3 features in the wild " by Peter Gasston July 3rd, 2008
-
Well, border-radius is now implemented in both Firefox & Safari, but the problem is that both have a different implementation of it. Safari's shorthand syntax differs from the W3C proposal (which was changed thanks to this blog!), and Firefox uses incorrect syntax for the individual properties (ie border-bottomleft-radius instead of border-radius-bottom-left) - I believe I read somewhere that this has since been sorted, but can't find any confirmation. Until these inconsistencies are resolved, the proposal will remain in draft. Posted to " Opera 10 Alpha continues the CSS3 push " by Peter Gasston December 5th, 2008
-
As I suspected, Dave Hyatt credits the KHTML team for their work in getting the remaining selectors working: http://webkit.org/blog/158/the-acid-3-test/ Posted to " Webkit passes the CSS Selector Test " by Peter Gasston March 6th, 2008
-
@ Mike: Yes, 'contents' refers to the content contained in the h1 tag. Posted to " Image Replacement in CSS3 " by Peter Gasston February 21st, 2008
-
@ Lars:
Opera does support 'content', but doesn't seem to support the 'url' function; whereas Safari does support the 'url' function, but not text string or 'contents' fallback - according to the very simple tests I've just run, anyway.Sorry, both support the 'url' function, but neither seems to support the 'contents' fallback. Posted to " Image Replacement in CSS3 " by Peter Gasston February 8th, 2008 -
@ Steve Workman: I can't find the article I read now, but the risk of infected font files is apparently very low; add to that the fact that you'll be able to disable font downloading, and a good antivirus should be able to check if you do enable it, and it's no more risky than downloading any other file from the web. In theory, viruses can be hidden in JPG and SWF files, but nobody worries about those! Posted to " Image Replacement in CSS3 " by Peter Gasston February 8th, 2008
-
@ Adam Luter: I edited your comment to fix the code; let me know if I've done anything wrong there. Posted to " Image Replacement in CSS3 " by Peter Gasston February 8th, 2008
-
According to my own stats - which again, are not necessarily indicative - IE6 had a market share of approx. 74% when IE7 was launched back in October 2006, and now has a share of 33.5%; that's a drop of more than half 15 months, which is quite substantial when we're talking about a user base of millions. Microsoft are currently doing a big push to get users upgraded - the prompt page mentioned above, and the roll-out as a high priority automatic update - which will hopefully pay dividends in reducing IE6 share further still. Posted to " The state of IE browser share today " by Peter Gasston January 25th, 2008
-
I think it's fine for browser makers to introduce prefixed features, as long as they submit documentation to the W3C which will allow the new feature to be reviewed and revised. Posted to " Webkit introduces 'background-clip:text' " by Peter Gasston March 25th, 2008
-
While I personally prefer Safari's built-in font rendering, it just didn't work in the context of Windows; it was one of many elements that made the browser look like an alien element in the Windows environment. Posted to " ClearType rendering forthcoming for Safari on Windows? " by Peter Gasston December 28th, 2007
-
Yes, I meant 9.5; I've had it installed for so long, I keep forgetting it's not been released yet! Posted to " Firefox 3.1 is the latest to pass our selectors test " by Peter Gasston June 11th, 2008
-
The difference, Asbjørn, is that the European Union found Microsoft guilty of abusing its monopoly position: http://en.wikipedia.org/wiki/European_Union_Microsoft_antitrust_case It's not just someone's point of view, it's a legal finding. Posted to " Opera files antitrust complaint against Microsoft " by Peter Gasston January 7th, 2008
-
@ John Allsopp: IE7, Opera, FF3 all now support full page/scalable zoom (not sure about Safari), so that's not so much of a problem (and with SVG images it will be a non-issue). As for updating IR'd text, that's up to the developer to make the decision of whether it's a good idea or not (probably not if you're handing the site off to a client). You could argue that quite a lot of the features of CSS shouldn't be used because they could be used badly, but that's obviously not a logical course of action. IR is common, and it's a useful tool in the armoury, so it's right that it should be made a standard rather than forcing workarounds. Posted to " Image Replacement in CSS3 " by Peter Gasston February 8th, 2008
-
Well CSS3 is modular, so it's not as if one new feature will delay the whole thing. As we're seeing with the Transformations module, what we need to make the whole thing move faster is for a couple of browser makers to implement it - with browser prefixes - so that it can be experimented with and any shortcomings found. Posted to " Summary of the two current CSS Constants proposals " by Peter Gasston November 18th, 2008
-
Nice text-shadow implementation. Glad to see they're adding more features in. Posted to " Firefox 3.1 is the latest to pass our selectors test " by Peter Gasston June 13th, 2008
-
@Luke: I've tested in Opera 9.5 (Beta) and they all seem to work; can't swear to whether it works in O9 or below. Posted to " :target pseudo selector tutorial " by Peter Gasston February 1st, 2008
-
@ Alex: Don't expect IE to support OpenType fonts; they're doing a big push to promote their own format as an open standard: http://www.fontembedding.com/ Posted to " @font-face in the wild " by Peter Gasston August 14th, 2008
-
Some peculiar WordPress plugin Javascript error is stopping me from posting the last two links in the article. They should be: 'Transitions': http://webkit.org/specs/CSSVisualEffects/CSSTransitions.html 'playing with Transitions': http://www.broken-links.com/2008/07/11/anime-with-css-and-webkit/ Posted to " CSS3 support in Firefox 3.1 " by Peter Gasston July 24th, 2008
-
Hi James, good to meet you last week; sorry to have missed you on Friday. There is a photograph, I just need to be brave enough to look for it on the camera! Regarding the Safari 'innovations', AFAIK all these are are SVG behaviours ported into CSS; it remains to be seen how attractive they will be to other browser makers. For me, at least, the jury is out. Posted to " Slow times for CSS 3 news " by Peter Gasston June 5th, 2008
-
I think I can stipulate that this wasn't my best post; yes, the substring selectors were available in IE7 already, and I should have made clearer that generated content was not the only new CSS feature, I just thought it was the most notable. I wrote this post late last night having had only an hour or so with IE8; proof that being quick to react doesn't mean giving the best reaction! Posted to " CSS3 features in IE8 " by Peter Gasston March 6th, 2008
-
I understand the reason given by browser makers for not wanting to implement this, but it does seem strange that we can perform similar functions in XPath & JavaScript without locking the browsers up. I still think it ought to be considered as a standard, however, even if current browser engines aren't capable of supporting it. Posted to " Shaun Inman proposes CSS Qualified Selectors " by Peter Gasston May 7th, 2008
-
And I tried both with and without unit values, and neither worked for me. Could you post your code? Posted to " Firefox 3.6 adds background clipping " by Peter Gasston August 26th, 2009
-
None of this is useful until a full release has been made. What good is having a nightly/Alpha release which passes the Acid3 test if we then have to wait for 6 months until people start using it? Calm down, everyone, and wait for someone to actually release this. Posted to " Opera overtakes Safari in Acid3 race, reaches 100% " by Peter Gasston March 27th, 2008
-
There seems to be a lot of resistance to multiple backgrounds from the Mozilla developers, which seems strange to me; it's constantly one of the most-requested features from developers. https://bugzilla.mozilla.org/show_bug.cgi?id=322475 Posted to " CSS3 support in Firefox 3.1 " by Peter Gasston July 25th, 2008
-
Just corrected that on David's behalf. Thanks. Posted to " Opera Dragonfly alpha 2 RC now available " by Peter Gasston June 27th, 2008
-
Sorry, Marty; the link is working now. Posted to " CSS3 Selectors - support in modern browsers " by Peter Gasston August 27th, 2008
-
I'm not sure that going down the 'optimised for browser X' path is one we want to be going back to after working so hard for standards. Posted to " Level 3 features in the wild " by Peter Gasston July 3rd, 2008
-
I don't have a machine with IE8 to hand, so I can't run the test at the moment, but IE's current CSS support document says the selectors are not supported yet. I'll try when I'm at work. Posted to " Firefox 3.1 is the latest to pass our selectors test " by Peter Gasston June 5th, 2008
-
IE6 scores 276/578, IE8B1 scores 335/578. FF3.1pA gets 74/100 on the Acid 3, which is a slight increase over FF3's 71/100. Statpr0n! Posted to " Firefox 3.1 is the latest to pass our selectors test " by Peter Gasston June 5th, 2008
-
@Robin: It's annoying; Mozilla's implementation of border-radius is now correct in the way it takes values, but it uses non-standard syntax: border-radius-topright, for example, instead of border-top-right-radius from the spec. I would assume this is fairly straightforward to correct - but then, I always assume that! Posted to " CSS3 support in Firefox 3.1 " by Peter Gasston July 24th, 2008
-
I didn't mention :not() specifically, but lumped it in with the other selectors. I was quite surprised by the lack of RGBA/HSLA; I'd assumed that with opacity implemented it would be fairly trivial. Obviously not. Posted to " Opera 9.5 launches with lots of CSS improvements " by Peter Gasston June 12th, 2008
-
The problem with border-radius is that the spec is not stable. Both Webkit and Gecko implement it, but using different syntax. The W3C is modifying the spec, but it's not ready yet. Posted to " Opera 9.5 launches with lots of CSS improvements " by Peter Gasston June 12th, 2008
-
@ Jerome: Yes, I know that; I should have made clearer that what I meant was not to expect IE to support un-embedded OT fonts (as Apple and Mozilla are doing), for exactly the reason you say; you can read more about it in the link I posted. BTW, OT isn't just the MS format now; it's an ISO standard. Posted to " @font-face in the wild " by Peter Gasston August 15th, 2008
-
"I get inconsistent layouts between Firefox and Safari (latest stable versions for windows)." - You're right, I'll look into why that's happening. "With such inconsistencies (and the prefixes), why do you advertise this module now?" - Part of the (unwritten) brief of this site is to highlight immature specs and new proposals so that developers can begin experimenting with them and hopefully provide useful feedback to the authors. I'd never tell you to start using this on a production site, but by experimenting now you can stay ahead of the curve when (if) the spec becomes a recommendation. Posted to " Introducing the Flexible Box Layout module " by Peter Gasston October 8th, 2009
-
Very impressive browser, and great demos. I look forward to trying out some of the new CSS implementations. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by Peter Gasston September 1st, 2009
-
Wha...? First I've seen (or heard of) this... Posted to " RGBa in action and further CSS3 reading " by Peter Gasston November 6th, 2008
-
I would say that at the moment this is a tool for discovering what the module is capable of; the spec is currently immature and may change, so I would be wary of using this on a production site. Posted to " Try out the CSS 3 Template Layout module " by Peter Gasston May 8th, 2009
-
I'm definitely in favour of introducing variables, and I lean towards the Hyatt/Glazman suggestion, purely because it is the more simple solution - albeit not as flexible as fantasai's. To anyone who thinks that this makes CSS too difficult to learn: I disagree. Yes, it makes it more complex but - crucially - you don't need to learn this in order to use CSS to the same degree we use it today; you can still build great styles without CSS variables, but with them it becomes easier. Posted to " Summary of the two current CSS Constants proposals " by Peter Gasston November 17th, 2008
-
"It does nothing other than bring back table-layout" - the advanced layout module allows for layouts which are much more complex than those which are available with tables. It should allow for same-height blocks, and for you to place elements out of order in the DOM, such as moving the footer below the h2 (examples given in your article). We'd have to see it in action before its real strengths and weaknesses can be assessed, however. Posted to " Meyer and Resig on CSS3 " by Peter Gasston December 10th, 2008
-
Great, Philippe! Thanks! It was indeed me getting the syntax wrong. I'll update the post shortly (the demo should work now). Posted to " Firefox 3.6 adds background clipping " by Peter Gasston August 27th, 2009
-
I've updated the post and demo now. Posted to " Firefox 3.6 adds background clipping " by Peter Gasston August 27th, 2009
-
There are some noted in the changelog: * Improved HTML5 support, including end-tag and start-tag parsing, whitespace parsing, and DOCTYPE parsing * HTML5 canvas elements can now export images to the JPEG format * HTML5 canvas transforms are applied when building a path, not when painting it * Implemented HTML5's algorithms for detecting charsets in HTML Posted to " Opera 10 Alpha continues the CSS3 push " by Peter Gasston December 4th, 2008
-
Of course, what is important is not who implemented which declaration first, but the fact that they are being implemented at all. Posted to " Opera 10 Alpha continues the CSS3 push " by Peter Gasston December 5th, 2008
-
@Boris: Proprietary prefixes are good for when browsers are trying out new features but are not ready for them to be 'official' yet; they should degrade gracefully, so users without compatible browsers see the default state. For example, you could have an element with a border, and apply -moz-border-radius and -webkit-border-radius to it so users of Firefox/Safari (etc.) see rounded corners, users of IE don't. It doesn't affect the content at all. It allows more experimental coders to play with new elements and report back to the W3C to help shape the spec. For example, pointing out the drawbacks in the Webkit & Mozilla implementations of border-radius on this site led to the W3C updating the spec. When a property is seen to be stable, the proprietary prefixes are removed - for example, -moz-opacity is now just opacity. So they do have many pracictal uses, but whether or not you use them on a production site is up to you. Posted to " Firefox 3.6 adds background clipping " by Peter Gasston August 26th, 2009
-
This does seem to be covered by the image-rect property that's landing in Firefox 3.6, and that syntax seems to work fine. Posted to " Image Sprites Syntax Request " by Peter Gasston October 18th, 2009
-
The example you used in your first comment, of having to continuously scroll the page up and down to read the text, is an example of a bad use of multi-column text; that's not to say there aren't good examples, though. If you take a look at a portfolio site I made last year (with Firefox or Safari) you can see that it works well for short blocks of text, and in this case increases the readability by making the lines shorter and not making the user scroll. If you're looking at multi-columns as a replacement for a proper page layout mechanism, you're looking at them wrong; they are an extra tool to lay out blocks of text. Posted to " Further progression in layout modules " by Peter Gasston April 12th, 2009
-
IE has supported @font-face for a long time, but only using fonts in the .eot format. Posted to " CSS3 features in IE8 " by Peter Gasston May 19th, 2009
-
None currently implement it, and none - AFAIK - have begun to implement it - although, I believe I saw it on a Mozilla roadmap for a future version, somewhere. Posted to " Try out the CSS 3 Template Layout module " by Peter Gasston May 5th, 2009
-
Templatelayout allows for more complicated layouts than tables: aaaa bccd bbdd And - crucially - it removes the layout rules into the presentation layer where they belong. As for multi-column, it definitely has a place; I've used it very successfully on one of my sites. Just because you can't immediately think of a use for it, doesn't mean no-one else can. Posted to " Further progression in layout modules " by Peter Gasston April 11th, 2009
-
@dudo: IE don't usually adopt any new CSS standards until the recommendation is mature, and test cases have been provided. While I'd love to see them be more adventurous with using -ie- prefixes in IE8.1 (if such a thing exists), I wouldn't expect to see that any time soon. Posted to " Further progression in layout modules " by Peter Gasston April 12th, 2009
-
@Ollie: There's currently a flash when using @font-face in Safari too, as they also wait for the font to load before applying it to the page. Firefox's implementation differs, as they load unstyled text before applying the font. Posted to " Is CSS 3 over-baked? " by Peter Gasston August 26th, 2009
-
I've put together a quick demo of some of these new features; take a look in Firefox 3.6a1 or a recent Webkit browser, and resize the browser window a few times for maximum effect: http://www.broken-links.com/2009/08/08/new-background-rules-in-firefox-3-6/ Posted to " Firefox 3.6 Alpha 1 Offers Increased Support for CSS3 " by Peter Gasston August 8th, 2009
-
@Charles: I took a look at the spec to see which was correct, but the language made my head spin and I couldn't decide one way or another! As for the box flex, I should have made clearer that the original values are respected and it is the empty space between them that is distributed 2:1. Posted to " Introducing the Flexible Box Layout module " by Peter Gasston October 9th, 2009
-
@Philippe: I've updated to the very latest nightly and tried every variation of the syntax, and still no result. Could you explain how you got it working? Posted to " Firefox 3.6 adds background clipping " by Peter Gasston August 26th, 2009
-
I don't see a world of difference between the two so I wouldn't complain if the syntax were changed - but then, I don't see any really clear advantage in the ED syntax. I've been using the WD syntax for a while now and it feels perfectly understandable to me - no harder to read than any other property value. If anything, the almost natural language of the ED feels different to the rest of the CSS syntax, and somewhat out of place. But as I said, no really strong opinion either way. Posted to " Radial Gradient Readability " by Peter Gasston November 11th, 2011
-
