Hardcore CSS

Based on overwhelming positive feedback, folks found Hardcore HTML useful. But while it focused on semantically meaningful web documents, CSS is necessary to turn that document into something with visual impact. CSS is the next piece of the web puzzle that we'll cover here.

But everyone knows CSS, right? Sort of. Rather than rehashing how to color a paragraph red, we'll check out some forgotten/underutilized features (like partial attribute selection). Paired with HTML5, there are things you'll need to know, like:

 

* What CSS specificity is, how it works, and how it has lately become more complex.

* CSS3 is much richer than rounded corners and background gradients.

* Animations and transformations are not as complex as you might think, and you no longer need javascript to do them.

* New HTML5 inputs are styled differently from text, and can require more CSS to manage.

* The new HTML5 attributes can be selected upon, and can help solve class-soup.

* Simple tricks can create complex negative selectors (not matchers), even without the new :not() selector...

 

Whether you are a hardcore coder, a designer, or just a part-time web enthusiast, I (yet again) guarantee you'll learn something new.

 

Food provided by Vitamin-T

CSS3/HTML5 Books given away courtesy of Accelebrate

Space provided by Webtrends.

Join or login to comment.

  • Rich

    Very informative and direct.

    July 20, 2012

  • Ben B.

    Someone asked about a css3 animation polyfill for older browsers- this one parses the css and translates it to jQuery animation equivalents. Your performance may take a nasty hit, especially because the code targets older, slower browsers where you might be better off with no animation, but this is the quickest and simplest solution I've seen. http://addyosmani.com/blog/css3...­

    July 14, 2012

  • Ben C.

    Great people, food, location. Good presentation, though I hoped for it to go quite a bit deeper with the title "hardcore CSS" (the content was fairly foundational). Perhaps we could do another hardcore CSS meetup focused on common issues with Responsive Layouts, serving content to HiDPI devices, common practices for keeping CSS organized, etc.

    All the same, a good meetup and glad I attended.

    July 13, 2012

  • David F.

    Eric managed to cover the basics while teasing the group with some advanced wizardry that certainly inspired me to experiment with some new ideas.

    July 13, 2012

  • A former member
    A former member

    Very useful stuff, and not as boring as Eric thought it was. :)

    July 13, 2012

  • A former member
    A former member

    It was a good introductory CSS presentation. Did not really find "Hardcore" in the title very appropriate,

    July 13, 2012

  • bruce g.

    I enjoyed the talk and the much smaller gathering that followed the talk. Thanks to all who contributed.

    July 13, 2012

  • A former member
    A former member

    Good information. Always a pleasure to learn something new!!

    July 13, 2012

  • Eric R.

    July 12, 2012

  • Rachel N.

    Good catch, Steck. "Ex" is the height traditional height value--the height of a lowercase x! It's actually valid to use in CSS, too, although I personally stick with em's.

    July 12, 2012

  • Eric R.

    David the owners have been found! Thanks for finding those

    July 12, 2012

  • Ivan

    It wasn't *quite* as hardcore as I thought it might be, but there was enough good stuff to keep me interested, and well-presented. Thanks! (And try using rems! They're great!)

    July 12, 2012

  • David F.

    FYI someone left a pair of sunglasses and a set of keys we left with the building concierge.

    July 12, 2012

  • A former member
    A former member

    Excellent talk -- I have a couple of pedantic points in response. First, the word "leading" is pronounced with a short 'e' -- the term comes from the lead strips that were inserted between lines of type (check Wikipedia). Also, the size of an em is derived from the width, not the height, of the letter M. In typography, a long dash is an "em-dash", one em wide, where a short dash is an "en-dash", because an N is narrower than an M, though they're the same height.

    1 · July 12, 2012

  • Evan K.

    I really enjoyed this meet up (other than having to leave early due to a migraine). CSS is my select field and there where still some points brought up that helped my understanding of a few things. Great job Eric.

    July 12, 2012

  • cliff e.

    Thanks for the great talk.

    July 12, 2012

  • Rachel N.

    So psyched to be here! I'm visiting from Raleigh for July. Looking forward to seeing what dev is like in Portland!

    July 12, 2012

  • Eric R.

    Yeah, I've started posting slides on slideshare: http://www.slideshare.net/eredm...­

    1 · July 7, 2012

  • A former member
    A former member

    Can't make this one unfortunately :( Will the slides/notes be online at some point?

    July 6, 2012

Our Sponsors

People in this
Meetup are also in:

Sometimes the best Meetup Group is the one you start

Get started Learn more
Katie

I'm surprised by the level of growth I've seen since becoming an organizer, it's given me more confidence in my abilities.

Katie, started NYC ICO

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy