css Archives - Broken Links Archive

The drawbacks of post-processing

In the last few days I‚Äôve been inves¬≠ti¬≠gat¬≠ing CSS post-pro¬≠cess¬≠ing, the idea behind which ‚Äď writ¬≠ing stylesheets using par¬≠tial¬≠ly imple¬≠ment¬≠ed or emerg¬≠ing stan¬≠dards, which are then tran¬≠spiled to make files which work in cur¬≠rent browsers ‚ÄĒ is more pleas¬≠ing to me than the abstrac¬≠tions of pre-proces¬≠sors like Sass. I‚Äôve been exper¬≠i¬≠ment¬≠ing with PostC¬≠SS (or rather, css¬≠next, which is to PostC¬≠SS as (broad¬≠ly) Bour¬≠bon is to Sass); how¬≠ev¬≠er, there are a cou¬≠ple of prob¬≠lems with post-pro¬≠cess¬≠ing, at least in the way that PostC¬≠SS approach¬≠es it, which makes me ques¬≠tion its utitility.

NB I must state clear­ly that these obser­va­tions are based on a very shal­low under­stand­ing from my ini­tial inves­ti­ga­tions of how PostC­SS works, and per­haps they would be clar­i­fied and resolved if I tried to use it on a full project. Update: See also the com­ments below this arti­cle, which clear up some of my misconceptions.

The first is that post-pro­cess­ing uses syn­tax from pro­posed stan­dards which have yet to be rat­i­fied. For exam­ple, the vari­ables syn­tax is based on Cus­tom Prop­er­ties which, athough imple­ment­ed in Fire­fox, are yet to have any firm com­mit­ment from oth­er brows­er ven­dors; the syn­tax could still be changed, or indeed dropped entire­ly. That would mean PostC­SS would have to either retain an out­dat­ed syn­tax for back­wards com­pat­i­bil­i­ty, or change it com­plete­ly to match future deci­sions, mak­ing main­tain­abil­i­ty of old projects hard­er for developers.

The sec¬≠ond prob¬≠lem is that the fea¬≠tures of Sass which are most use¬≠ful (and wide¬≠ly used) are those which great¬≠ly extend the core CSS syn¬≠tax ‚Äď notably, nest¬≠ing and mix¬≠ins. While there are PostC¬≠SS plu¬≠g¬≠ins that add exten¬≠sions to match pre-pro¬≠cess¬≠ing fea¬≠tures, using them means that your source stylesheet is no longer ‚Äėprop¬≠er‚Äô CSS ‚ÄĒ which is the main attrac¬≠tion of a post-proces¬≠sor to me. If your source stylesheet is large¬≠ly invalid, you might as well use a pre-processor.

Per­haps, as Lyza Dan­ger Gard­ner con­clud­ed, using post-proces­sors means giv­ing up cer­tain features:

Tak­ing a path paved with lean, mod­u­lar post-pro­cess­ing plu­g­ins involves sac­ri­fices. No more nest­ing. Instead of an end­less hori­zon of mix­in pos­si­bil­i­ties, you may be bound to CSS spec real­i­ties, like calc or CSS variables.

I still like the idea of post-pro¬≠cess¬≠ing, but per¬≠haps I need a longer peri¬≠od of accli¬≠ma¬≠ti¬≠sa¬≠tion before it ful¬≠ly makes sense to me.


CSS Blending ‚ÄĒ a Five-minute Introduction

With the release of ver­sion 30, Fire­fox becomes the lat­est brows­er to sup­port CSS Blend Modes (Chrome has had them for a few months, and sup­port is on the way in Safari 8). But what are blend modes? What is blend­ing, for that matter?

If you’ve ever used image edit­ing tools like Pho­to­shop, Sketch or GIMP, you’ll prob­a­bly already be famil­iar with blend modes. For every­one else, they are meth­ods of mix­ing two visu­al lay­ers so that the two are com­bined. This could be an image lay­er with a colour lay­er, or two image layers.

Read the full article

Cross-browser filters with CSS and SVG

For some time now, since Safari 6 and Chrome 18 were released, we‚Äôve been able to use the -webkit-filter CSS prop¬≠er¬≠ty to apply graph¬≠i¬≠cal fil¬≠ters to HTML con¬≠tent. But it seems that many peo¬≠ple aren‚Äôt aware that you can also do this in Fire¬≠fox and ‚ÄĒ with¬≠in a very lim¬≠it¬≠ed set of para¬≠me¬≠ters ‚ÄĒ IE9 and above.

The rea­son for this is that all of these browsers sup­port SVG fil­ter effects, and CSS fil­ter effects are basi­cal­ly short­hand func­tions that apply pre­de­fined con­fig­u­ra­tions of SVG filters.

Read the full article

It‚Äôs CSS Day next month!

Next month I‚Äôll have the plea¬≠sure of tak¬≠ing part in CSS Day in Ams¬≠ter¬≠dam, not once, but twice. On Fri¬≠day 14th June I‚Äôll be on stage along¬≠side a tru¬≠ly stel¬≠lar line-up of speak¬≠ers: Eric Mey¬≠er, Bert Bos, Stephen Hay, Divya Man¬≠ian, Tab Atkins, Daniel Glaz¬≠man and Lea Ver¬≠ou. Each of us will be look¬≠ing in detail at a spe¬≠cif¬≠ic mod¬≠ule (or mod¬≠ules) of the CSS spec; my talk will be on the Ani¬≠ma¬≠tions and Tran¬≠si¬≠tions mod¬≠ules. If you‚Äôre into CSS in a big way, this day is one you won‚Äôt want to miss.

On the pre¬≠vi¬≠ous day, Thurs¬≠day 13th June, I‚Äôll be giv¬≠ing a one-day Respon¬≠sive Web Design work¬≠shop, where I‚Äôll be teach¬≠ing the full process of cre¬≠at¬≠ing a respon¬≠sive web¬≠site: plan¬≠ning and strat¬≠e¬≠gy, pro¬≠to¬≠typ¬≠ing, tools, design deliv¬≠er¬≠ables, and, of course, cod¬≠ing. Alter¬≠na¬≠tive¬≠ly, if your CSS is not quite up to scratch and you need a refresh¬≠er before the con¬≠fer¬≠ence, Eric Mey¬≠er will be giv¬≠ing a work¬≠shop which will teach you all you need to know.

Each work¬≠shop costs ‚ā¨300, and the con¬≠fer¬≠ence day costs ‚ā¨250 (Dutch VAT of 21% will be added to both). Full details, pro¬≠gramme and tick¬≠ets are all on CSSDay.nl, along with a nice lit¬≠tle East¬≠er egg I found out about today: click on a speak¬≠ers name on the Pro¬≠gramme page to see some live exam¬≠ples of their cho¬≠sen subject!

Oh, and as if my con¬≠fer¬≠ence and some fan¬≠tas¬≠tic talks weren‚Äôt enough, as a bonus you get to spend a few days in beau¬≠ti¬≠ful Ams¬≠ter¬≠dam. I‚Äôm real¬≠ly excit¬≠ed to be a part of this, and hope to see you there!

Removing the whitespace from inline block elements

There are two com­mon meth­ods of build­ing a hor­i­zon­tal com­po­nent, such as nav­i­ga­tion: using floats; or set­ting the display prop­er­ty to inline-block. This lat­ter approach makes child ele­ments run in to the same hor­i­zon­tal line in the doc­u­ment flow but pre­serves their block behav­iour, and is pret­ty effec­tive because you don’t have to wor­ry about clear­ing floats as you would in the alter­na­tive tech­nique. It does, how­ev­er, have a drawback.

Read the full article

Speaking at CSS Day, and a FoWD reminder

I‚Äôm extreme¬≠ly hap¬≠py to announce that I‚Äôve been asked to speak at CSS Day, a one-day event in June that explores CSS in advanced detail, in the com¬≠pa¬≠ny of an array of amaz¬≠ing speak¬≠ers: Lea Ver¬≠ou, Eric Mey¬≠er, Bert Bos, Tab Atkins, Divya Man¬≠ian, Stephen Hay, and Daniel Glaz¬≠man. Wow.

I‚Äôll be dis¬≠cussing the intri¬≠ca¬≠cies and secrets of the Ani¬≠ma¬≠tions and Tran¬≠si¬≠tions mod¬≠ules, while each of the oth¬≠er speak¬≠ers will also cov¬≠er a sin¬≠gle top¬≠ic in great detail. It promis¬≠es to be a real¬≠ly good day. Tick¬≠ets cost ‚ā¨250 (plus 21 per¬≠cent tax).

The day before CSS Day there are also two work¬≠shops: Eric Mey¬≠er will explain the basics of each of the mod¬≠ules to be explained the fol¬≠low¬≠ing day, in case you‚Äôre wor¬≠ried about not being able to fol¬≠low some of the talks, while I‚Äôll be teach¬≠ing Respon¬≠sive Web Design tech¬≠niques and approach¬≠es. Tick¬≠ets for each work¬≠shop cost ‚ā¨300 (plus tax).

And just a reminder that I‚Äôll be speak¬≠ing at Future of Web Design in Lon¬≠don in May, where I‚Äôll also be giv¬≠ing a one-day work¬≠shop on CSS3 the day before. If you book now you get the work¬≠shop plus two days of con¬≠fer¬≠ence for only ¬£595 (plus tax).



I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.