Lea is a front end web developer from Greece. You have likely heard of her, as ever since she started blogging in English (read more about that below), she’s had quite a boom in popularity. Or perhaps you’ve seen some of her work. She’s created a number of one-page sites that either show off amazing things CSS can do or help you with a difficult/tedious task.
I asked Lea some questions about critical reaction to her work, the community in Greece, the future of CSS, and more.
*Chris: I think you proved with your pattern gallery that CSS3 gradients can do a lot more than make 3D looking buttons. What are some real-world design scenarios you’ve come across where you’ve reached for gradients to help get it done?
Lea: Here’s the first ones that come to mind:
- On my blog, as you can see one side is peachy stripes, the other side is white. Actually, gradients aren’t only used there for the peachy stripes, but also to cover the other side with white. I used the same trick in the -prefix-free homepage.
- On cubic-bezier.com, the guides are made with CSS gradients.
- On CSS.coloratum, I use black & white stripes made with gradients, behind the color, which helps when it’s semi-transparent (it doesn’t show at all when it’s a solid color).
- On Michaelia Hotel’s website, for the hole in the circle and also the lower left diagonal corner on the booking page.
Of course I’ve also reached for CSS gradients in many more cases where I needed, well, gradients. But I guess you weren’t asking about that :)
*Chris: You recently authored -prefix-free, a JavaScript CSS processor that automatically adds the required vendor prefixes to CSS properties to make them work in whatever browser a user happens to be in. You’ve gotten extreme mixed reactions on this. An opposer might talk about “flash of un-CSS3’d content” or generically that JavaScript isn’t correct for this kind of thing. Can you recap the most common complaints and have your say?
Lea: “Extreme mixed reactions” indeed! People either absolutely love it or absolutely hate it. Luckily, the ones in the former category far outnumber the ones in the latter one. The most common complaints by the people in the 2nd category are:
“It will cause FOUC (Flash of Un-CSS3-ed content)”
My answer: If you put -prefix-free right after the stylesheets, the FOUC is so minimal that nobody will notice, unless they’re looking for it. Regular users don’t go hunting for FOUCs like we do. We might think “it was super quick but I managed to notice a FOUC, ha!”, but users don’t even think of taking part in silly “spot the FOUC” games. They will notice it if it lasts too long or if the difference is too big. For example, regular FOUC (Flash of Unstyled Content) is much easier to notice, because the page is completely unstyled. -prefix-free’s FOUC is just some CSS3 missing for a fraction of a second.
“It makes the style depend on JavaScript”
My answer: If JavaScript is not available (< 2% of visitors), the only styles that will be missing are some CSS3 features (less and less as the time passes and vendors drop prefixes). If you designed the page with graceful degradation in mind, it should work and look fine even without any CSS3. If you didn't, you'll have bigger problems than that. “This is something better done on the server. Do it once instead of on every pageload”
My answer: What -prefix-free exactly does, is impossible to do in the server. -prefix-free detects which features need a prefix and only adds it if needed. Also, it automatically detects which properties are available that need a prefix. It doesn’t have to keep lists of which prefixes to add for which features, everything gets feature detected, and thus is very future proof. With preprocessors, lists need to be maintained about this sort of stuff. Such lists are doomed to be incomplete and quickly get out of date. Every server-side prefixer I ever tried fails in a number of cases.
For example, think about CSS animations. In the beginning, it was only Webkit. Then Firefox implemented them, and we had to go back and add -moz- versions too. Now IE has just implemented them too, so everything has to change and include a -ms- prefix as well. Soon, Opera will implement CSS animations. Are we really going to go back for a third time and add @-o-keyframes? Probably not. Most people will just start making up excuses about how Opera’s market share is low and how they don’t need to bother. -prefix-free is great for cases like that, because you never need to go back and change anything. When Opera implements CSS animations, they will work fine in Opera too, without even -prefix-free requiring an update.
“But what if you actually need vendor prefixes because an implementation is buggy?”
My answer: -prefix-free doesn’t change stuff that’s already prefixed, so if you need to specify something different for a specific engine, you can use prefixed along with unprefixed. -prefix-free also adds a class with the current prefix to the root element, to give you even greater flexibility.
*Chris: You live in Greece now. Maybe it’s just my perspective but Greece doesn’t seem like a hotbed for progressive web technology. Or am I wrong? Clearly that didn’t prevent it from creating a world class developer like you. Does location matter much anymore for what you can achieve?
Lea: You are not wrong at all Chris, Greece is very far from being a hotbed for progressive web technology. You might be surprised to hear that I hardly get any recognition in Greece. I even have a Greek hater! (although he lives in Brussels, not Greece)
When I first started blogging, I started posting my research in Greek. Nobody paid much attention. After a few months I decided to try my luck with an English blog and well, we both know how that turned out :)
I think it’s because most Greek developers just want a quick solution that works in every browser, to apply to their current project and move on. They don’t have time to think about research and cool new stuff, they’re still struggling with getting things to work. So, even though they will recognize projects and people that helped ease their day-to-day development pain, they won’t care much about experimental stuff. Greeks are also very ageist, they won’t even hear what you have to say unless you have lots of “years of experience” in your back. Young people are generally put down a lot here, and if you’re not strong enough, you might actually believe you can’t do anything until you reach your forties. Luckily, location doesn’t matter a lot in our field, at least as far as countries go. If you want to have an international audience, you just start using English in everything you do online, it’s that simple.
However, I am planning to move out of Greece in a few months, hopefully to the US. Even though I’m Greek, Greece never really felt like home to me. I’m much happier when I’m not here. There was a quote from the recent “Rise of the Planet of the Apes” movie, that I found very moving, for this exact reason. After Caesar spent some time with other apes and met his human foster-father again, he refused to come home and instead told him “Caesar is home”. Sometimes, the place you belong in (“home”) is not the place where you grew up or where your loved ones are. It’s where you can easily find others that are similar to you and truly “get” you.
*Chris: For years now, designers have been stretching the abilities of CSS by creating complex imagery through “Pure CSS”. On one hand, usually clever and impressive. On the other, usually impractical and unsemantic. A year and a half ago you called this out and cited SVG as a better alternative. Why do you think designers aren’t experimenting with SVG more? A year and a half later, is it still a better choice?
Lea: Yes, I still think SVG is a better choice. It was created for this purpose, and it allows for many more things than even CSS3 does. However, it still doesn’t have the adoption it deserves, which I mainly attribute to the following reasons:
- Difficult syntax. SVG allows us to do crazy things, but with most of the times just as crazy and complicated syntax. It makes sense once you understand how each feature works, but the learning curve is very steep. Especially since there’s no debugging tool that helps you understand what you did wrong and very little information about browser support, so you might get stuck wondering if you misunderstood something or it’s just not supported.
- Not enough resources. This is kind of a chicken and egg thing. If not enough people fiddle around with SVG, not enough people write tutorials, so not enough people are inspired to learn SVG. The few resources that exist are either very simple examples for beginners or academic stuff without much relevance to applied work (and both are usually ugly as f***, turning designers away).
- Hard to understand specifications. While CSS and HTML specs are reasonably easy to understand for the most part, a big part of the SVG specs requires university-level Computer Graphics and Linear Algebra knowledge. Even if you have that kind of knowledge, it’s still hard. Given the lack of good SVG resources mentioned above, this hurts SVG adoption much more than meets the eye.
- Laziness. People like what’s familiar, what they already know. If they can avoid learning something new, most will.
- Browser support issues. SVG brings its own set of browser bugs to the table, most of which are far less documented than CSS & HTML bugs. This is also a chicken and egg thing: The more developers use a certain technology, the highest priority its bugs get. Currently there are SVG bugs that are left unresolved for years, because not enough people use it.
I think however that there’s lots of untapped potential in SVG, especially now that we can embed it in HTML5 documents. It’s hidden there, waiting to be discovered. We just need more creative minds to start playing with it.
*Chris: What is your CSS wish? Something that you regularly wish you could accomplish with CSS but can’t. Perhaps an existing feature with very limited browser support. Or something completely outside the current spec and discussions around the spec.
Lea: My favorite CSS3 feature that doesn’t have enough implementations yet is the CSS3 generalization of attr()
. In CSS2.1, we can use attr()
in the content property, to use attribute values in generated content. In CSS3, we’re supposed to be able to use attr()
in every property, which will greatly reduce presentational JavaScript code. Unfortunately, only IE9 supports it, and not fully. If only developers realized how many use cases it simplifies and started pushing browser vendors for it!
But I also have lots of not yet existing features in my CSS wishlist:
- A generalization of
currentColor
: Acurrent()
function that would accept any property (currentColor
would then just become an alias tocurrent(color)
). - The
inherit
keyword becoming a function, that would accept a parameter to specify how many nesting levels to go up.inherit
would then be aliased toinherit(1)
. - Being able to use the color keyword
invert
everywhere, not just in outlines. - Being able to use
attr()
andcounter()
in selectors. - Conical gradients, which are hopefully coming in CSS4.
- Diagonal corners, with adjustable angle and size (example)
and many, many more. When it comes to CSS, I’m a big dreamer :)
Great interview. Thanks for sharing Chris and Lea! This further pushed me towards looking at -prefix-free.
I must say I enjoyed reading this interview with Lea. I got inspired so many times by her amazing work, keep up the good work!
Thanks!
Well Done. I’ve been following Lea on Twitter for the past few months and the CSS-Tricks site for longer. You both have made me a fan of what I do and that is an amazing gift. I think everyone forgets how fun this can all be. Thanks for sharing!
Awesome interview! Also, this might be kind of creepy… but she’s really pretty.
It is a shame Lea doesn’t feel at home in her native country. I hope that one day in the not too distant future she can feel more favourably about Greece. Perhaps it is the economic climate that has led to this.
With regard to CSS there is just so much to stay on top of. Factor in HTML5 and javascript developments, plus another language of choice such as PHP, and any dev has their work cut out for them.
Really appreciate learning from others – such as Lea who find the time to experiment document and importantly share.
Thanks
I have to completely agree about the svg stuff. I think Raphael.js is a great tool for achieving some good cross browser SVG graphics that can be interacted with and be animated, but it has quite the learning curve. It is great that you can export out a vector object in Illustrator as SVG, but then what do you do with it? I recently used SVG for a project at the University I work out. We have a map of the US, and student can drill down based on where they are from to find the admission councilor that is in charge of their area. We opted for SVG simply because it is much easier to deal with than doing image maps. But SVG isn’t supported by IE, instead they use the proprietary VML. Raphael.js will convert it for you automatically, but we were under too tight of a deadline to get everything converted from SVG to Raphael code. Instead we used a JS plugin called SVG Web which converted SVG on the page into flash for IE support. It was easy and worked really nicely for our purposes. So, options are out there if you are will to do a bit of digging.
Hey Ryan,
do you use SVG Web in conjunction with Raphael.js or is it an alternative to it?
Thanks,
Pat
nice answers! love the planet of the aps reference!
+1 @John Gilmore
I like Lea’s fresh ideas and hope she never looses her creativity and interest for experimentation.
As a Greek though, I felt a little sad for what she had to say for her own people. So I will try to make it up on behalf of the Greek developers and designers:
The entire web creative community has very few people who are original innovators and have a good understanding of the internet technologies. Knowing how controversial that will sound in a CSS blog, you have to agree that CSS is one small piece of what web is, so there are even fewer people who can really appreciate a genius’s work for CSS. At the same time, there are tons of people who follow others just because of popular sentiments. Especially in the community of designers there is usually a few who innovate and thousands who just cheer and copy. My point is that Lea and other ingenious people should value the bravo of other equally ingenious people and ignore the cheers from the rest. Otherwise they just put their ego in a path to arrogance. Now, Greece being a small country has a small share of ingenious people who could appreciate her work. I know quite a few of them, so they do exist. So, Lea don’t do what you blame the others for doing at you: don’t judge people so harshly unless you have a deep understanding.
My previous comment was supposed to be a reply to this, I guess I forgot to click reply. Damn.
Alex, I said “most”. Of course there are exceptions and I quite a few in mind. Judging by how you said it’s a “small share” yourself, I don’t think you disagree much with that sentiment about the majority.
Not sure what is there to have a deep understanding for before being given the …priviledge of having a bad opinion. Greeks? I’ve lived in Greece all my life, not sure how deeper my understanding can get.
I also don’t see how NOT ignoring people’s good comments unless they’re “ingenious” gets you in the path for arrogance. I’d say the exact opposite. Not trying to pour oil on the fire here, but it seems that arrogance is Greeks’ favorite insult. Everyone that doesn’t think they’re worthless is arrogant according to most Greeks. Ever since I started becoming somewhat known in the industry, I’ve gotten so much shit from Greeks that I’m arrogant and have an inflated ego. Strangely enough, non-Greeks seem to have the exact opposite opinion. I have many theories about why that is so, but this comment is getting too long.
Hi Lea,
This arrogance and aggressive attitude can be quite seen in the Balkans. I’m from Bulgaria, but I’ve lived for many years in the US and I do understand your thoughts. I believe this sort of animosity is dragging us behind. Absolutely, there are exceptions, but the majority of people in the Balkans are expressing the aforementioned behavior to a great degree.
Awesome interview. :)
I really like pushing myself to use as few images and JavaScript on a page as possible, and those css3 tools on leas website are awesome.
I’m totally going to start using prefix free on my final implementations as well, to make sure they stays on top of their games.
I’m remaking my schools website (tannernelson.me/ehs) and I plan to implement tons more css3 stuff so this is very inspirational.
Thanks!
Good to see nerdy, good looking gals do something that matters in the world of web progression! Keep up the good work gal!
That said, if you don’t feel at home in Greece, then perhaps try your luck elsewhere? :)
That’s the plan :)
Thanks for the praise :)
Interesting interview. It’s good, Lea speaks her mind. +1
Like I said before, Lea is one of the people I would really love to meet in person because she really knows a lot about the web, and is very kind. Thanks Chris, for having this great inspirational interview, it has showed me a lot!
Thanks Marco!
Btw I was in the Netherlands for Fronteers, how come we didn’t meet?
I really wanted to go there, but sadly it was on the same date as a very important deadline/release date on the product we’re working on. Hope to see you another time!
Wow, not sure what its called to disascociate yourself from your country when your country is not very popular, snobbery maybe? Someone help me find the word…
I *have* to like it because it’s not very popular? LOL, hipster country, never thought of it like that :P
Wow, very exciting stuff, thanks for all your hard work and sharing your results!
Great interview – really nice to hear what’s on the minds of the people pushing the boundaries of web building. Thanks for sharing!
Lea, I feel so much related when you talk about Greece! Hope you’ll find your new “home” soon :P
Howdy fellow geeks!
I’m Dimitris from Greece. I admit that I never heard of Lea, but hearing it from Chris Coyier, definitely gonna follow her.
Till this moment, I see no problem with Lea’s attitude. Au contraire, it’s the greek “you-re-successful-and-i-hate-you-for-that” attitude that dragged us deep in the shit.
Here in Greece, we have a phrase that describes pretty much the general behaviour: Greece eats her children, meaning that when you’re trying to be different, everyone else try to pull you under. And this is the truth, I had similar experiences several times, but I’ll go no further.
Anyway, I’m happy that I see a Greek person that interesting. Gives me strength to go on.
Oh, and yes, I wanna leave the country too.
Dimitris
PS: Sorry for me pretty weak english.
Hi Dimitri!
Thanks for the support.
PS: I’m probably not the right person to tell, but your English looks perfect to me :)
Great writeup!
Lea, come to Australia one day! Not sure if you’ve been before but I’d love to see you at webdirections south one day. :)
I’m coming to New Zealand next August. Not Australia, but much closer than all of my other talks :)
Really nice interview! I’ve been hoping two of the biggest CSS advocates would do an interview together….now just waiting for a collaboration project that I’m sure will blow the universe apart with its pure CSS awesomeness! :D
Hello Lea
I’m from Colombia a country located in South America, it seems very good work and I like to be able to follow more closely to learn much more from you and guide me better in my self-learning process.
A hug
(@JaoPi)
PS: Sorry for me pretty weak english.
Good interview. i want to know about CSS
Well said Lea.. First of all I want to tell you that I admire the work you are doing. I have used your work, I ve studied your work and I trully believe you are a great developer. If leaving Greece is what would make you happy, you should do it!
Nice record of the interview. Thanks for this great work. This helps a lot of people who are eager to learn more about CSS.