Archive for the ‘CSS3’ Category

No Comments

CSS vendor prefix issues

Thursday, February 16th, 2012

Vendor prefixes are the verbose code you see in new `HTML5` sites, in which browser vendors test their new CSS3 rules, when specs are in proposal time or under development.

Something like:


-o-transition: opacity 1s ease-in 1s; //opera
-moz-transition: opacity 1s ease-in 1s; /firefox
-ms-transition: opacity 1s ease-in 1s; // internet explorer
-webkit-transition: opacity 1s ease-in 1s; // safari , chrome
-khtml-transition: opacity 1s ease-in 1s; // konquerer , linux
transition: opacity 1s ease-in 1s; // all when it's official spec

The problem is that most developers seem to do just this:

-webkit-transition: opacity 1s ease-in 1s; // safari , chrome

So they only support webkit browsers and that is plain dumb. At least you should always add the rule without any prefix. That means eventually it will work in every browser that supports it.
Typing all the rules is a pain in the ass, so most developers only do webkit, probably also because Apple invented quite a lot for transitions etc. At that time it was not supported by any other browser, so why on earth should you add code that has no meaning. Well because you care about the future and care about different minded people.

Two helpful solutions

First there are macro’s for IDE’s to type one rule and auto generate the other ones. Here is a CSS vendor prefix macro for Netbeans. Not much of a hassle.

Secondly you can call userJS to the rescue, userJS is like userCSS a rather underestimated part of the internet, but yet a very valuable one. It let you overrule CSS rules or run own JS in websites.

For Opera add this as a userJS:

opera.addEventListener('BeforeCSS', function(userJSEvent){
userJSEvent.cssText = userJSEvent.cssText
.replace(/-(moz|ms|webkit|o)-(border|text-overflow)/g,'$2')
.replace(/-(moz|ms|webkit)-(gradient|transform|transition)/g,'-o-$2');
}, false);

Source here

It will automatically rewrite all -webkit- rules to -o-  rules in Opera, so all the webkit  demo’s will start to work. (if Opera supports them)

Caveats

  • Code (css specs) can change during development.
  • Implementations differ between vendors.

Of course these are workarounds, I still think developers should add all vendor prefixes to their code. It can be automated in an IDE like with mentioned macro for Netbeans or in deployment.

9 Comments

How to disable CSS transforms, transistions and animations

Thursday, January 12th, 2012

Sick of too much eye-candy and is your browser slowing down due to all the shiny and inappropriate animations?

What don’t you disable all the CSS3 animations, CSS3 transforms and CSS3 transitions with one click and speed up your browsing experience!

Put this in your User-CSS stylesheet:

* {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

Now you can check with one mouse click if animations or transforms on a page are javascript or CSS driven.

Easy debugging!

Update Nov 2017

Nowadays browser-prefixes can be dropped. And  XFCE Mouse made a comment to include ::before and ::after,which will stop animation in more cases.

*, :before, :after {
 /*CSS transitions*/
 transition-property: none !important;
 /*CSS transforms*/
 transform: none !important;
 /*CSS animations*/
 animation: none !important;
 }

Update Oct 2018
Thx tommasz86, indeed a star is not needed for pseudo-elements :after and :before. Should parse a little faster now ;). I agree commenting out transform is appropriate in most cases.

Still amazed this little user-style can save 40% CPU in Firefox 62 on pages with code like this:

.loader, .wheel {
background: url("../images/loader.svg") center center no-repeat;
webkit-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite;
}

Even when the .loader animation is not visible anymore!

Where are the days of good old Norwegian Opera (Presto) browser that could disable animations (including animated gifs) with a mouse click?

1 Comment

Creating spinners with CSS transitions/transform and a bit of JS

Wednesday, June 1st, 2011

CSS3 can deliver animations without the help of javascript libraries. Less code, less server requests, so faster loading of your website.

Furthermore CSS will be hardware accelerated by the browser when possible. Not now, but in the near future. So it’s preferable to use CSS instead of javascript. Goodbye to jQuery UI?

We will see, since mobile web is really emerging we’re in the need of a better content/pagesize ratio. Less markup, less JS, less server request, and faster loading.

So a little example here. Compare it to the javascript driven various spinners out there on the internet.

No Comments

Google webfonts for everyday use?

Tuesday, October 19th, 2010

Let’s try some webfonts again from the Google Webfont api. Tangerine and Canterell. I like the webfont idea from Google. Read more about it on their blogpost.

This text is Tangerine

This text is Tangerine italic

This text is Tangerine bold

This text is Cantarell

This text is Cantarell italic

This text is Cantarell bold

A tad small compared to the default font. And Opera 10.63 renders all font-styles bold and italic as normal. Weird, for  the inventors of the webfont.

No Comments

The shadow of the invisible: AKA How to create fuzzy fonts with pure CSS

Thursday, October 7th, 2010

No, I wasn’t drunk writing this post, just had a long hot shower.

No, you don’t need new specs, this text is slightly blurred.

Scrubbing my back I was thinking about the new CSS3 stuff, and what you can do about spicing up the layout.

After my hot shower, steam filling my bathroom, I looked at myself in the mirror, razor-blade in hand to deliver a fast and clean shave.

Stop!

No shaving in the mist, no blood in the tub, but EUREKA
Fuzzy fonts with CSS!

How? (more…)

No Comments

HTML 5 and internal datepicker

Sunday, August 2nd, 2009

As pointed out in an earlier post, HTML5 and the webfont CSS @fontface property will phase out the need for font replacement techniques like sIFR or Cufon.

And another popular javascript driven UI-aid is gonna deprecate soon. The date-picker or calendar tool.

HTML5 that now incorporates the Webform2 specification which has internal support for a calendar tool, range slider and number spinners.

HTML5 datepicker rendered by Opera 10

HTML5 datepicker rendered by Opera 10


Opera is the only browser that has support for Webform now for several years. I made some internal tools that used it.

It so simpel and powerful. And no more localisation issues.

Some examples (need Opera 9+ to see)
With other HTML5 nonsupporting browsers it will degrade to an ordinary input field.

Datepicker

[sourcecode language=’xhtml’]

[/sourcecode]

Email

[sourcecode language=’xhtml’]

[/sourcecode]
*Note the automatically added special email icon in Opera

Number (with automatic spinner)

[sourcecode language=’xhtml’]

[/sourcecode]

Range (slider)

[sourcecode language=’xhtml’]

[/sourcecode]
Default range: 0 – 100. I guess this will be another UI favourite.