Other Tools and Websites

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

Now, let’s move quickly.

HTML5 Please

This website will tell you under what conditions it is recommended to use each CSS3 (or HTML5) property. In other words, it will tell you whether or not to use a particular property and whether to use it using a prefix or a polyfill. When using certain properties, it is better to wait until they are fully supported. Just take these as general recommendations and always take into account the particular target audience of your website. html5please.com

Can I Use

“Can I Use” is a website containing tables with information on which browsers can and do support a specific property and which do not. If you must remember just one website, this is the one. This website can also be interconnected with your Google Analytics stats. However, it is quite clear that support of browser properties on a global scale offers no guarantees when it comes to your own project. caniuse.com

Should I Prefix

Shall I use a prefixed version when using specific CSS3 properties? This website might come in handy, but using an Autoprefixer is a much better solution. You can find references to Autoprefixer in the previous chapters of this e-book. shouldiprefix.com

Modernizr

This is a javascript library for feature detection. Pick a CSS3 or HTML5 feature you are using on a particular project and the Modernizr webiste will generate a piece of code that you can insert into your own code. In CSS, you can then use conditions such as .no-flexbox .form. In javascript you can use something like this: if (Modernizr.canvas) { … }. modernizr.com

Project Templates

If you do not fancy doing projects from scratch, take a look at HTML5 Boilerplate - a default HTML template. This has proved effective as a knowledge base but I do not recommend using it on real projects. html5boilerplate.com

A more massive project base is Web Starter Kit by Google. Apart from ready-made HTML, CSS and JS files, you can find a complete Gulp workflow there. developers.google.com/web/starter-kit/

Moreover, a lot of templates (even quite complex ones) can be found in Yeoman generators.yeoman.io/generators/

Documentation

Superb documentation of new web technologies and CSS3 properties can be found at the Mozilla Developer Network. developer.mozilla.org/en-US/docs/Web/CSS/CSS3.

And just for the record: the content of this e-book can also be found at cssmine.com.

More Advanced Tools

As I have already mentioned in the introduction, in general it is not wise to overrate tools. In this e-book, I focus on beginner and intermediate front-end developers. If you see yourself as an advanced developer, you should not miss tools such as Broccoli, Browserify, Webpack or CSSNext. If you are into Javascript, take a look at Babel and Traceur.

That’s it. Enjoy!


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more