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
with - elements, and you wanted\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/accessibility-a11y.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362616,"url":"https:\/\/css-tricks.com\/css-scroll-snap-slide-deck\/","url_meta":{"origin":300134,"position":2},"title":"CSS Scroll Snap Slide Deck That Supports Live Coding","date":"February 7, 2022","format":false,"excerpt":"Virtual conferences have changed the game in terms of how a presenter is able to deliver content to an audience. At a live event it\u2019s likely you just have your laptop, but at home, you may have multiple monitors so that you can move around windows and make off-screen changes\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040704100_slide-topic.png?fit=1200%2C631&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298497,"url":"https:\/\/css-tricks.com\/two-value-display-syntax-and-sometimes-three\/","url_meta":{"origin":300134,"position":3},"title":"Two-Value Display Syntax (and Sometimes Three)","date":"November 8, 2019","format":false,"excerpt":"You know the single-value syntax: .thing { display: block; }. The value \"block\" being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/dot-connections.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253183,"url":"https:\/\/css-tricks.com\/slides-css-tricks-poster-child-wordpress-site\/","url_meta":{"origin":300134,"position":4},"title":"Slides: CSS-Tricks is a Poster Child WordPress Site","date":"March 26, 2017","format":false,"excerpt":"I just gave a talk at WordCamp Miami where I talked about, to some degree, how WordPress has been a great choice for CSS-Tricks over the last decade. If I get a chance I'll try to re-give the talk to my computer locally here so there will be a way\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/wordpress-miami.jpg?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14492,"url":"https:\/\/css-tricks.com\/writing-better-html-css-slides-from-fowa-london\/","url_meta":{"origin":300134,"position":5},"title":"Writing Better HTML & CSS (Slides from FOWA London)","date":"October 10, 2011","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300134"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=300134"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300134\/revisions"}],"predecessor-version":[{"id":300137,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300134\/revisions\/300137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300135"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=300134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=300134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=300134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}