Web-01.jpg Source: https://www.flickr.com/photos/manoftaste-de/14069118533 License: CC BY-SA 2.0 by www.manoftaste.de https://www.flickr.com/photos/manoftaste-de/

CSS Level 3 Is Coming, Is Your Browser Ready?

Do you know that you are missing a lot in your current browser?  Take a look at this screenshot taken from this game review.

CSS3 (via Safari 3.x)
CSS3 (via Safari 3.x)

The screenshot above was produced by a browser, it wasn’t made in any image editing tool like GIMP.  It’s natural.  Can’t believe that it is possible?

Well you should, and you are going to miss more and more such new features as we move closer to CSS Level 3 (“CSS3).  Currently, the browser with the most implementation of CSS3 is Apple’s browser – Safari v3.x branch.  The screenshot above was from Safari 3.

I am not telling you to make the switch, as long as you are not using Internet Explorer, you’ll be fine.  Firefox 3’s next upgrade, v3.1 is already testing the features out.  Opera is said to be experimenting with it already for their Opera 10 release.  IE8?  No news and I’m not counting an early implementation from that browser (until they’re forced to because they’re losing users to their competitors – so make that switch!  You don’t know how hard it is for us web designers to make our sites appear fine in IE!!).

By the way, I do not know of any WYSIWYG (What-You-See-Is-What-You-Get) editors that offers CSS3 support yet.  CSS3 is still in development and only a few of its modules are near finalization.  So for now, we’ll get down to the codes itself.

Gimme a Curve!

Many web designers have dreamed of this feature, some used JavaScript to make the curved border corners, while some did it the old-fashioned way – lots of little images!  (Which is very bad.)  With CSS3, a new property was introduced, the border-radius property.  In my example above, I have it as:

'border-radius: 5px;'

But that doesn’t work yet since it isn’t finalized, you have to add/use vendor prefixes like so:

-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    -ms-border-radius: 5px;
     -o-border-radius: 5px;

The use of vendor prefixes allows a browser developer to test the implementation of new CSS properties, especially if the CSS property has not been finalized by the World Wide Web Consortium or W3C, yet.  By using a vendor prefix, you technically acknowledge that you know what you are doing and that you wouldn’t hold the browser vendors liable if your site later produces errors.

The prefixes of major (HTML) layout engines are:

  • -webkit- for Webkit-based browsers like Safari, iOS, Chrome/Chromium, Maxthon 3, Adobe AIR, Midori, Android, Palm webOS, Symbian S60, Steam, Rekonq, Arora, Flock v3+, Dolphin Browser, RockMeltAdobe Dreamweaver CS4/CS5, and others
  • -moz- for Gecko-based browsers like Firefox, SeaMonkey, Flock, Debian IceWeasel, GNU IceCat, Icedove, Iceape, Iceowl, Fennec, Thunderbird, Waterfox, PaleMoon, and others
  • -ms- for Trident-based browsers like Internet Explorer, Maxthon (Windows OS only), Windows Phone 8, and others
  • -o- for Presto-based browsers like Opera, Opera Mobile, Nintendo DS/DSi, and others

Be sure to include the base form border-radius after your vendor prefix set.  This guarantees that the last, non-prefix version is used by the browser in the future, especially once the browser developer removes support for the prefixed property.

CSS3 (Firefox)
CSS3 (Firefox)

Gimme a Shadow!

box-shadow and just like the previous property, you have to use a vendor prefix to make it to work as of this writing.  My setup in my example is as follows:

-webkit-box-shadow: 7px 7px 7px #888;
   -moz-box-shadow: 7px 7px 7px #888;
    -ms-box-shadow: 7px 7px 7px #888;
     -o-box-shadow: 7px 7px 7px #888;
        box-shadow: 7px 7px 7px #888;

However, for Mozilla, it will only work on Firefox 3.1 where it is being tested.

CSS3 (via Firefox 3.1a2)
CSS3 (via Firefox 3.1a2)

Gimme text-shadow too!

You got it already!  The CSS3 property is text-shadow.  My setup:

text-shadow: 0.35em 0.35em 0.35em #000;

For this property, you do not need any vendor prefixes as the real non-prefixed property was already implemented by browser vendors.

CSS3 (Opera)
CSS3 (Opera)

I also have another secret.  If you are using Safari 3.x or Firefox 3.1.x, you may have noticed your browser rendering a different font on my headline, which if I will take a guess, you do not have installed.  The secret is the @font-face property.  A CSS property that was actually introduced in CSS Level 2 (“CSS2”).  The @font-face property was reported to be working on Opera 9.5x but I can’t get it to work (so probably it was for Opera 10).

Other browsers than IE only recently supported this at-property, Apple started the revival with the release of Safari 3.  @font-face was proposed by the MSIE team and was accepted by the W3C.  However, for IE, they only support the EOT format and not TTF or OTF, but details of this is for another discussion.

My code is simple:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
    src: local("Fertigo Pro"),
            url("http://gameshogun.ws/rsc/fonts/Fertigo_PRO.otf") format("opentype");
    font-family: "Fertigo Pro";         /* serif */
}
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */

The local parameter was used in case the font is already installed in the visitor’s machine, if not, it will fetch the font from the URL as defined by the author.  The format is used to make it easy for the user’s browser to find the type of the font.  As simple as that!  @font-face is an advance property, there are more uses to it than I presented here (and I am actually enjoying it in my test server).

A fair warning, be careful when “embedding” fonts into your webpages.  There are licenses to be followed and respected.  To check, just right-click your font file then choose properties (if you are on Windows OS).  Under the Embedding tab, it should say “Installable…”  That is the only time you can upload a font and link it as shown in my example above.

There are some exemptions to this depending on the Font License offered.  Some do not have “Installable…” in the Font Properties Embedding tab but somewhere on the Font’s official website is a clause that states you can use it for @font-face or “Web-fonts” or “Web Embedding”.  Be also mindful of the other clauses like giving credits back.

That’s it for now – CSS3, things to come and things you can already use.

Have fun and enjoy!


References:

Is a self-confessed bibliophile and technophile other than being an early adopter, an avid gamer, a geek, nerd, role-player, anime otaku, and trekker.

His first online project was in 1998 when he launched the unofficial website for Ansalon MUD and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™.

His website is jcsesecuneta.com and 1way.faith. He also owns Clean Real Food, YourOnly.One, Adorable & Beautiful, and other online properties.

Summary
Article Name
CSS Level 3 Is Coming, Is Your Browser Ready?
Description
CSS Level 3 is the new kid on the block. Web designers are very excited about it. But the real question is, are your browsers ready to display CSS 3?
Author
Publisher
techmagus™

CC BY-SA 4.0 CSS Level 3 Is Coming, Is Your Browser Ready? by Yuki is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.

Comment(s) via

Loading Facebook Comments ...
Loading Disqus Comments ...
Skip to toolbar