Posts Tagged ‘css’

10 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

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

SVG – background image

Tuesday, December 8th, 2009

Another example of using SVG-object as background-images for HTML elements.

Lorem ipsum dolor sit amet consectetuer nibh tellus Nulla ut tortor. Mauris nisl sem parturient urna amet Nam orci pretium Morbi nunc. Id pellentesque sed sed et et nunc Nam Vestibulum tincidunt penatibus. Nibh quis eu dolor tellus nulla malesuada condimentum sed Curabitur sed. Urna metus senectus Phasellus justo et Nulla leo tincidunt Curabitur turpis. Enim mauris eu sit lacus Ut Phasellus molestie eros nascetur tincidunt. Justo pretium cursus.

Metus massa eros ipsum consequat et dui id ligula sem nibh. Et ut malesuada Maecenas pede Cum fames Ut non convallis Quisque. Vitae nibh porttitor orci nisl semper vitae justo orci Curabitur eu. Elit quis condimentum ridiculus dictumst quis laoreet tempus consectetuer lacus vel. Lorem wisi porttitor sollicitudin auctor id ipsum tempus libero nec.

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.

3 Comments

Webfonts easy to use: no need for sIFR

Thursday, April 2nd, 2009

Webfonts is a technique for defining a variety of fonts to be displayed in a web browser.

In CSS authors typically specify font characteristics via a font property (font-family). In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Designers of webpages had no way to propose other fonts to the user other than generic default fonts installed on the client computer.

Now with CSS3 the situation, when there is no matching font on the client, has been expanded. Fonts can be downloaded over the web by the browser and used on the client. This gives the author much more control over the typography and design of the page, because it’s not longer dependend of locally stored fonts.

This means this is no need anymore for flash based work-arounds like sIFR. The other good thing is that browsers can fall back to more generic fonts, when they don’t support the webfonts.

So there is no reason at all to wait using them.

Like for most web-innovations based on open standards, Microsoft is NOT supporting it. They have there own implementation based on a proprietary standard EOT. This is not a W3C recommendation nor is it supported by any other company. I think we have to wait till Internet Explorers` marketshare is dropping under 30% before Microsoft is starting to support open standards Web Fonts.

To see this paragraph in a different font, try the appropriate buttons.



You need a webfont supporting browser: Safari 3.1+, Opera 10 +, Firefox 3.1 + or Chrome 2 +.