CSS3 Live Blog (#lwscss3)

by edds. 0 Comments

Dissection of New Twitter — Makayla Lewis @maccymacx

People with disabilities use twitter as a life blood to communicate. So what effect did new twitter have on these people. New twitter bought a lot of new features.

When it first launched people didn’t know when they were going to get it. There was no real communication from twitter. People had problems with it. Twitter did nothing to help people switch to new twitter.

You should give your users knowledge of what changes are coming and provide support while the changes are coming out. Consult your users. Do not roll out highly buggy software. people with disabilities need time to adapt so don’t roll out new features to quickly.

Transitions, Transforms, Animations — Inayaili de León (@yaili)

What are they? 2D transforms allow elements to be transformed, moved, rotated, scaled in a 2d space. You can apply all of these at the same-time. You can also define the origin of the transforms.

There also 3D transforms which add the z-axis. When using 3D transforms you get some extra transforms and properties.

If an element has children inside it the children are transformed flat with it. You can bring the element above it by using the translate on the child. For transforms to look nice and smooth we need to add transitions. Transitions will make the transforms smooth.

Animations are where it gets fun. You can reuse animations through your CSS. You specify it’s duration, repeat and direction on an element. Animations are defined in keyframes.

Because this is not standardised yet we need to use vendor prefixes to make it work. Each of the browsers have their own prefixes. Wikipedia entry entitled comparison of layout engines is a really good resource. “When can I use” let’s you know when you can use this in browsers.

LESS and Sass let you use mixins which let you reuse blocks of CSS throughout your document. You can have a simple mixin to let you make translate CSS properties smaller.

Try and read the CSS spec. It’s not the most exciting document on the Internet but it does let you know what things are supposed to do or how things are progressing.

Some people say CSS is getting to much into Javascrips arena. Content should be separated from style from behaviour. Mixing these can be seen as bad. In some instances we can ask if it’s the wrong tool for the job.

You can use animations to delight to make people feel good but not to make e whole experience. CSS animations can provide a warm fuzzy feeling. But just because you can doesn’t mean you should.

The CSS3 of Tomorrow — Peter Gasston

There is lots of CSS3 stuff that we all already know. Rounded corners, drop shadows, selectors, multiple backgrounds, border images, rgba, web fonts, media queries.

But that is not all you can do with CSS3. Gradients, you can add linear gradients to your page, radial gradients, repeating radial gradients. The syntax has standardised onto something simpler, the original syntax for webkit was a little complicated.

The big challenge for CSS is how to do a decent layout. Floats margins were never meant to do what it does now. The most basic is adding multiple columns, you can specify spacing, number and width.

Flexible box layout, this let’s you use `box-flex` to auto width boxes to fill the space of a parent div. You can also use it to do vertical centring. It also let’s you order things differently to they appear in the DOM.

Grid positioning, introduced in IE 10 let’s you structure things in columns and rows and let you use relative and auto values to auto size things into a grid.

Template layout, let’s you order things on a page, either in rows or columns, it let’s you build up the standard two and three column layouts really easily. It isn’t currently implemented in any browser but it should come. You should be able to use template layout and grid layout together.

Extended floats, let’s you position floats better. It’s only been suggested at the moment but it looks promising. Regions, suggested by adobe, let’s you use content from one element in one or more elements.

Exclusions, you can make content entering a defined polygon this is useful to let you have text flow around image. It can also work in the opposite so that text can flow only outside of the plugin that you specify.

Grouping selector `any` to let you group collections of CSS selectors into on selector. `calc` to let you mix relative with absolute sizes.

Native image sprites, this lets you specify a region of an image and it will use that section to display the image. Image fallbacks in CSS. Conditional rules, so only browsers who support a property will see selections of rules. `@document` let’s you have conditional CSS blocks for pages that match an expression. Variables and mixins so you don’t have to repeat your CSS too much.

None of this is set in stone but it’s all possible.

Leave a Reply

Your email address will not be published. Required fields are marked *


HTML tags are not allowed.