Descriptor

Recently we have created new version of mobil.aftenposten.no but soon after serving it to some users we spot this tweet:  https://twitter.com/Al3x4nd3rR/status/452047498111369216 . Basically titles were missing.... Then it started our effort to reproduce this bug. ... It was nightmare! First how to reproduce it: Open  http://krzychukula.github.io/vw_bfcache/  in Mobile Safari.  Click "Go to another page" link Leave phone for 60 seconds (longer is better) Click back button If you were lucky you should see some missing paragraphs and missing green boxes. How it looks: Bug: This one uses vw and vh for font-size. Both are 0 so we can see only 2 from 8 paragraphs. Those two are using only em for font-size. I was curious if it's only for font-size so I have added another test. I have added two boxes with width and height set in vw and vh with green background color. They parents have red background for contrast.  ...

Mobile HTML5 by Estelle Weyl Book "Mobile HTML5" is really good. I have heard about it last year at Front-Trends conference and I'm glad because of this. It's really good for beginners and intermediate developers.  Estelle Weyl reminded me that mobile HTML5 is 95% just HTML5. You can treat this book as a reference of various mobile quirks especially if you need to support something else than only newest Safari on iPhone.  If you are interested in HTML5 but mostly how to use it in mobile browsers this book is for you. It covers every aspect of mobile web development so you can read about CSS3, JavaScript and even some basics of DevTools.  Rating: 8/10 

There is really good article trending right now about animations by the author of GreenSock Animation Platform Jack Doyle about tradeoffs of both JavaScript and CSS animations. Myth Busting: CSS Animations vs. JavaScript The really good thing about it is that you can read really good explanations about how animations work, what problems you might have and when it might be better idea to use CSS and when JavaScript. It is really impressive how much information this article contains.

Awesome presentation about CSS and how to make it elegant. This is hard work and single tool such as SASS can't help you alone. http://speakerdeck.com/u/chriseppstein/p/help-my-stylesheets-are-a-mess

http://cssarrowplease.com/  is a simple, but useful tool for generating arrow in CSS. Easy to change properties of arrow and just copy generated CSS.

All you want to know about CSS support in IE (from 5.5 to 9). http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx This is official Microsoft document.

Nice list of CSS selectors and properties that can be used after dropping IE6 support. http://www.bennadel.com/blog/2306-What-CSS-Properties-Are-Supported-When-You-Drop-IE6-Support.htm

As described on  http://www.quirksmode.org/css/textoverflow.html Can be used to create "..." for too long texts within blocks with overflow:hidden. This can be really useful tool.

https://github.com/yahoo/debugCSS/blob/master/debugCSS.css This is interesting idea to create CSS stylesheet to display errors in markup.

Consider this post more like stream of thought, rather than complete manifesto, or whatever this looks like.   Today I read  http://www.impressivewebs.com/browser-performance-pickle/ This article is just about problem, maybe about problems our industry has with older browsers. Progessive enhancement is awesome, but how in "real life" really make it working, how to convince you'r boss that this is good, how to convince customer? Sometimes You just CAN'T. On the other side we have pollyfils, we make it working in older browsers. Add hacks, more html, even more CSS. Code is ugly but finally works everywhere! Everyone is happy besides You. After some time they want to change something on site, and You tell them ridiculously long estimation. Why, because this is nightmare to maintain, to test again and again if this little tiny images for shadows works as supposed in IE6. And what tell You them when this site is really slow in this old browsers? Impossible to fix. G...

http://css-tricks.com/examples/ShapesOfCSS/ Shapes like: square, circle, oval, triangle... pacman, star, talk bubble.

PHP Preprocessor like SASS or Less. http://the-echoplex.net/csscrush/ Looks like it has all of most common CSS Preprocessors features. Probably the most important one is PHP as implementation languge ;)

Bootstrap if toolkit from twitter that will bring to Your website good looking CSS at start point. http://twitter.github.com/bootstrap/ Bootstrap uses LessCSS  but can be used just as CSS, Less just will help you customize Bootstrap faster.

Good post about responsive design, pointing that this is not silver bullet. It can introduce new problems with advertising, cost and user experience. As author wrote it is stile very good  tool, but use it wisely. http://blog.echoenduring.com/2011/08/06/i-love-responsive-design-but/

From some time after reading about OOCSS and CSSLint I think about id selectors. Another good post about it: http://oli.jp/2011/ids/ As author tested id selectors aren't that fast! So strongest argument is not so strong.

Great post about CSS positioning. From html tables to Float defects. Alternatives: inline-block (with one defect of it's own). CSS3 - Flexbox CSS3 - Template Layot Model http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/

Object Oriented CSS View more presentations from Nicole Sullivan Interesting presentation with similar rules like CSSLint. Makes me thinking how this can cooperate with SASS/LESS adny if OOCSS or SASS/LESS really solves CSS problems?

http://csslint.net/ This tool is intended to validate CSS files. Many people are against rules in CSSLint. Read more:  http://news.ycombinator.com/item?id=2658948

http://css-tricks.com/full-browser-width-bars/ + demo:  http://css-tricks.com/examples/FullBrowserWidthBars/

http://mathiasbynens.be/notes/safe-css-hacks