I’m just back from London where I spoke at the Future of Web Apps. My talk was titled, rather generically, Writing Better HTML & CSS. Slides pale in comparison to real talks, but I still like posting them in case there are some small useful bits:
It was a three-part talk. I started high-level talking about how Wufoo handles CSS, which is a topic I’d love to hear more people talking about (i.e. medium/large companies plan / approach / architecture when it comes to front end resources). Then I got mid-level talking about how we should write less specific and more gentle CSS selectors to make our lives easier by not fighting ourselves. Then I got all nuts-and-bolts by putting a modified version of my pseudo elements talk at the end.
Also, I embedded the slides above from Speaker Deck, a very nice and clean web app from the Ordered List team for sharing slides.
Thanks for the share. Any plans to post the video? Having your words and thoughts along with the slides would be very helpful.
Maybe, but probably not on video. Don’t worry though I’ll probably do this talk a few more times in the future and it’ll get better and maybe one of those will be publicly recorded.
Right on Chris, thank you. I saw the Holy Grail image (and others) and was dying to hear the reaction to your stage presence.
Thanks for sharing.
This was fantastic! I’d love to see or hear the accompanying video/audio. Thanks, Chris!
Really enjoyed that. Certainly re-thought sometimes now
Agreed, the video would be helpful but something tells me that’s outta your hands. :)
Still, I managed to take a few things away from the slides alone. I may have fallen in love with pseudo elements. :D
Not wanting take a very deep dive, and I may be wrong also, but from what little I can read in those slides it appears to me like advices for those still struggling to put dynamic server pages to use.
I mean, 1 way to be efficient in 200 places is to make use of any server side language to dynamically generate your code.
Replacing an element with a class and some CSS added content adds to the complexity and the end results are questionable at best.
It just looks to me like forced thinking in order to bring something different to the table. Well, different is not always better. It’s certainly doesn’t look like it’s cleaner either. To me :)
Is “Buttons with icons” an unfortunate study case for what you’re trying to relay?
Aside from the obvious differences, why is CSS :before better than CSS background?
The background for buttons is a gradient. You can’t add an additional background image to an element via an add-on class. The syntax for this is coming, but it’s not possible yet.
As for your first comment, I don’t understand what you’re talking about. It might be difficult to understand my points with the slides alone.
Ah, got i now. You’re solving a multiple mixed (image + gradient) background problem there.
I’m not convinced. You’ve falsely created the problem in the first place by choosing the path of adding the img element to support your gradient choice of background for the anchor. I wouldn’t do it like that so I wouldn’t have this problem to solve in the first place.
Also, your IE7 7% will see none. Meanwhile, using an img and a custom IE .Microsoft.gradient will make for a complete IE treat.
About my first comment: only those not using some kind of server side language need to make 200 mods in case of changing in style. Those using a server side support language don’t have this problem since their code is not static.
HTML is HTML. It doesn’t matter if it’s generated by some server side fanciness or not. If that server side fanciness generates 200 lines of HTML that don’t need to be there, that’s still bad, and if you can abstract it away to CSS, that’s good. I know what you mean though, it’s less of a big deal and easier to fix.
The over-arching concept of the pseudo elements part of the talk is that anything that is “designy fancy” that doesn’t hold semantic/content value is a fantastic thing to get OUT of the markup and IN to the CSS.
Lemme see:
You’re saying that by generating *content* with CSS you’re writing less HTML for *presentational* purpose ?!
I’m still saying that you’re not tackling the problem the best way :)
Or, at least, that your img solution that you’re trying to fix it shouldn’t even be thought of as a viable one in the first place.
1. Generate HTML content with CSS: a possible clearer markup source; the additionally created markup ends up in DOM (well, kinda, but in the future things may change that too); very muddy waters about the separation between coding and content&style
2. Generate HTML content with a server side: a definite clearer markup source; added functionality; the additional dynamically created markup ends up in DOM; a clear separation of coding and content&style
Provided still that using an img to solve a problem only to create another would be a viable solution ;)
Out of curiosity, did you wear the same shirt?
haha!
That was great, I hope there is a video or audio coming.
Love the sense of humor that permeates all of your work, Chris. Web developers can be (this isn’t necessarily true most of the time, but some of the time anyway) rather dry, but you certainly aren’t!
Like everyone else i would love to hear the audio as you have a unique humor about yourself, apart from that i much enjoyed the slides.
SpriteCow.com – I could not remember, thanks!
Nice graphic slides. Good work!
OMG! It’s pretty sophisticated. I probably implement a similar strategy in .NET and IIS. Chris, your new website theme has only one stylesheet attached. Has you used the same technique here too?
Chris, what are the chances of getting my hands on that AutoVersion.php file to tinker with?? The idea of it handling the myriad of .css files that are sometimes needed on my projects without having to create one giant messy codeblock in my html would be nice. Do you know if it Grubs through the files and gathers the individual css files or do you have to hardcode them in?
Did a search on AutoVersion.php and came up with some useful info. “compress css on the fly” too. GREAT ideas here Chris (as usual) Thanks.
Should we hate IDs selectors in the future?
Wow Chris. As always your info is top notch! I never would have thought to use :before & Content to make a bad ass button! Are you going to speak at all up in Canada? :) PS – The kid picture of you is pretty bad ass.
useful article, thanks.
Chris, can you post a link to AutoVersion.php? Thanks.
Someone has the AutoVersion class that is mentioned in the post?
Where is a like button? Thank you for sharing!
+1
This one was great and entertaining! :o)
I’m also interested in nabbing both your version of the autoversion php function (does this compress the css too?) as well as the audio from your presentation.
I watched your talk on youtube about the :before and :after psuedo elements so I understand the slides a bit better now, but the audio would be great.
Is there a tutorial step-by-step for what you did with the .htaccess file in order to have just the necessary css files within each page?
Adding content using pseudo elements is blowing my mind. Great slides, Chris – wish I could have been there!
Sweet! Thanks for sharing. Learned lots. Now to practice and apply what I have learned.
Thanks for sharing! Great job with that presentation. I’d love to be this year at FOWA but finally my company didn’t pay it for me. :P
Love slide 55! Never ever thought i could include an image path in the ‘content’!
Hey Chris, awesome slides. We’ve been tinkering with breaking up our css files and using an auto-versioning script. Any chance you could publish it on github, that would be truly awesome! Thanks again, cant wait for audio or video for this presentation.
Jenny
Forgot to mention that id also love to see the Smarty autoversion function you created. Thanks chris!