Stunning CSS3<\/a>, so I’m assuming you fully support using CSS3 in production websites today. What do you think about the territory where CSS3 and JavaScript overlap? Use CSS3 and skip the JavaScript? Use JavaScript instead? Test for support and do fallbacks? There are lots of ways to handle it and it seems like not much consensus on the “best” way.<\/h4>\nZoe:<\/strong> I’m going to give you the somewhat annoying answer of “it depends.” But it’s true, I think. Some effects are best controlled with CSS3, and some with JavaScript. Most of what’s new to CSS3 are truly visual effects, so it makes the most sense and is most efficient to use CSS instead of JavaScript to accomplish these effects. For instance, rounded corners. Sure, JavaScript can do it, but it’s not a behavior – it makes a lot more sense for this to be in the domain of CSS. It’s so easy to use border-radius to make rounded corners, it’s just a few bytes of CSS to download, and it degrades well in non-supporting browsers.<\/p>\nYou can certainly use JavaScript as a fallback for many CSS3 effects. But again, whether you should do it depends on the effect and the project. Going back to rounded corners, for instance, you can use JavaScript as a workaround for IE, but you might get a performance hit for using it, so it might not be worth it for such a minor visual effect. In my book I talk about JavaScript alternatives throughout, and non-scripting workarounds too, and discuss the pros and cons. In the cases where I think it’s worth it to implement a workaround, I walk you through how to do it. So I’m an advocate for both approaches, I suppose (leaving it alone and providing a non-CSS3 fallback).<\/p>\n
*<\/span>Chris:<\/strong> Do you have a CSS pet peeve? Something that seems to come up over and over again while building sites you wish there was a better solution for?<\/h4>\nZoe:<\/strong> Since I usually build liquid layouts, combining different types of units is a tricky thing I run into often, like percentage widths with pixel-based padding. There are plenty of ways to work around it, but it would be nice if there was a cleaner, no-brainer way. The calc() function is going to be awesome for this sort of thing when it’s finally usable, but that’s a long way off!<\/p>\nAnother thing I hate having to do with CSS is align side-by-side elements vertically with one another. Like, make a text label, form field, and link all aligned across their middles, or along their baselines. The flexible box layout model is going to make this easy, but again, we have to wait for it.<\/p>\n
Something that the flexible box layout model doesn’t do that I wish it would is allow you to set the widths of side-by-side boxes proportionally to one another. For instance, make one box take up twice as much space as each of the following boxes take, with each adjusting if more or less boxes are added to the line. There’s a common and understandable misconception that the box-flex property lets you do this, but that’s not how it actually works or is supposed to work, according to the W3C spec. So there’s no way, current or planned, to do proportional widths with CSS – at least not that I’ve been able to figure out!<\/p>\n
*<\/span>Chris:<\/strong> What kind of software do you use to do most of your CSS work? Do you use any kind of visual editor or prefer writing it by hand? Do you use any snippets\/macros\/bundles? Any other fancy workflow tips?<\/h4>\nZoe:<\/strong> I use Dreamweaver for all my CSS work, but I write it all by hand in code view. It has great hinting, and I use its snippets feature a bit too. You can also modify its default, blank CSS file to include whatever CSS snippets you want from the get-go, so every time you create a new CSS file your starting-point stuff is already there. Over the years, I’ve created my own collection of standard CSS rules that I add to almost every project, so that’s in my default CSS file, as well as saved as a normal CSS file that I can add to any new project I start.<\/p>\n","protected":false},"excerpt":{"rendered":"Zoe is a hero of the modern web. I first heard of her from her book Flexible Web Design, which is a super comprehensive and sensible look at building fluid width websites (and other techniques to make websites take advantage of a variable width browser window). At the time, “media queries” weren’t really a thing. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,21],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":5520,"url":"https:\/\/css-tricks.com\/the-great-css-off-giveaway\/","url_meta":{"origin":8372,"position":0},"title":"The Great CSS Off & Giveaway","date":"February 10, 2010","format":false,"excerpt":"Alrighty folks, here's the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I've been deep in thought trying to figure out the best way to give them all away. I definitely didn't want to spam Twitter. I also\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cssoffpreview.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20812,"url":"https:\/\/css-tricks.com\/you-can-transition-z-index\/","url_meta":{"origin":8372,"position":1},"title":"You Can Transition z-index","date":"March 27, 2013","format":false,"excerpt":"Zoe Gillenwater reminds us it's just a number, so why not? So obviously I made this dumb wall-phasing ghost.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":302215,"url":"https:\/\/css-tricks.com\/css4\/","url_meta":{"origin":8372,"position":2},"title":"CSS4","date":"February 4, 2020","format":false,"excerpt":"What is CSS4? Is it a real thing? I hate to break it to you, but not really. But maybe we could make it a thing? CSS3 was successful, so why not keep that train rolling like they do in JavaScript?","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/css4.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":210563,"url":"https:\/\/css-tricks.com\/the-difference-between-responsive-and-adaptive-design\/","url_meta":{"origin":8372,"position":3},"title":"The Difference Between Responsive and Adaptive Design","date":"November 11, 2015","format":false,"excerpt":"This is a question that comes up more regularly than you might expect. We see it pop up in the CSS-Tricks forums from time-to-time. It's also a common question I'm asked when teaching introductory web design. And it's a good question! Responsive web design has become a household term since\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":355395,"url":"https:\/\/css-tricks.com\/responsible-javascript-2\/","url_meta":{"origin":8372,"position":4},"title":"Responsible JavaScript","date":"November 2, 2021","format":false,"excerpt":"High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a negative impact on the web, but now we have the canonical reference tome. The book is just chock-full of Jeremy\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7883,"url":"https:\/\/css-tricks.com\/20-things-i-learned-about-browsers-and-the-web\/","url_meta":{"origin":8372,"position":5},"title":"20 Things I Learned about Browsers and the Web","date":"November 18, 2010","format":false,"excerpt":"Really neat presentation of a book by the Google Chrome Team. Everyone seems to be calling it an \"HTML5\" book There is certainly a bunch of HTML5 going on, but there is also loads of CSS3 and clever JavaScript at work. Read a few pages then close the tab and\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8372"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8372"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8372\/revisions"}],"predecessor-version":[{"id":8384,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8372\/revisions\/8384"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=8372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}