{"id":300134,"date":"2019-12-16T08:16:24","date_gmt":"2019-12-16T15:16:24","guid":{"rendered":"https:\/\/css-tricks.com\/?p=300134"},"modified":"2019-12-19T08:13:10","modified_gmt":"2019-12-19T15:13:10","slug":"now-you-see-it","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/now-you-see-it\/","title":{"rendered":"Now You See It"},"content":{"rendered":"

I recently accepted a teaching position at a local college here in SoCal where I’ll be spouting off whatever I know (or more likely don’t know!) about HTML and CSS. It’s suffice to say I was all ears (well, actually eyes) when Rachel Andrew recently published a post on teaching CSS<\/a>.<\/p>\n

The display<\/code> property is a core piece to understanding the layout possibilities of CSS, particularly, as Rachel points out, the outer value (block<\/code> and inline<\/code>) and the inner formatting context (coming in grid, flex and normal flow varieties). Understanding that difference is what led to my personal CSS “A-ha!” moment<\/a>.<\/p>\n

That’s why I’m so glad to see Rachel publish the slides<\/a> from her presentation at An Event Apart in San Francisco this month.<\/p>\n

<\/p>\n

We’re talking 114 slides of pure box-y goodness! Pay close attention to slides 37-42 because they cover information on the refactored two-value display<\/code> syntax<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

I recently accepted a teaching position at a local college here in SoCal where I’ll be spouting off whatever I know (or more likely don’t know!) about HTML and CSS. It’s suffice to say I was all ears (well, actually eyes) when Rachel Andrew recently published a post on teaching CSS. The display property is […]<\/p>\n","protected":false},"author":2508,"featured_media":300135,"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":true,"jetpack_social_options":[]},"categories":[17],"tags":[6924],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/display-boxes.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":162167,"url":"https:\/\/css-tricks.com\/draggable-elements-push-others-way\/","url_meta":{"origin":300134,"position":0},"title":"Draggable Elements That Push Others Out Of Way","date":"February 7, 2014","format":false,"excerpt":"Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web. E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch equivalents. Fortunately this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337504,"url":"https:\/\/css-tricks.com\/some-articles-about-accessibility-ive-saved-recently\/","url_meta":{"origin":300134,"position":1},"title":"Some Articles About Accessibility I’ve Saved Recently","date":"April 6, 2021","format":false,"excerpt":"\"Good news about display: contents and Chrome\"\u2009\u2014\u2009Rachel Andrew notes that the accessibility danger of using display: contents; is fixed in Chrome. The problem was that, say you had a parent div that is laid out as a grid and inside you have a