{"id":28660,"date":"2018-07-08T16:18:19","date_gmt":"2018-07-08T14:18:19","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=28660"},"modified":"2018-07-08T16:18:19","modified_gmt":"2018-07-08T14:18:19","slug":"the-div-that-looks-different-in-every-browser","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2018\/07\/08\/the-div-that-looks-different-in-every-browser\/","title":{"rendered":"The div that looks different in every browser"},"content":{"rendered":"<!-- google_ad_section_start -->\n<p><a href=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"28661\" data-permalink=\"https:\/\/mamchenkov.net\/wordpress\/2018\/07\/08\/the-div-that-looks-different-in-every-browser\/div\/\" data-orig-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?fit=1200%2C800&amp;ssl=1\" data-orig-size=\"1200,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"div\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?fit=660%2C440&amp;ssl=1\" class=\"aligncenter size-medium wp-image-28661\" src=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div-500x333.jpg?resize=500%2C333&#038;ssl=1\" alt=\"\" width=\"500\" height=\"333\" srcset=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?resize=500%2C333&amp;ssl=1 500w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?resize=768%2C512&amp;ssl=1 768w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?resize=1024%2C683&amp;ssl=1 1024w, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/07\/div.jpg?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/twitter.com\/Martijn_Cuppens\/status\/1015169981368225793\">Martijn Cuppens tweets<\/a> the link to <a href=\"https:\/\/codepen.io\/MartijnCuppens\/pen\/MXojmw\">this code snippet<\/a> and a screenshot of how the code renders in different browsers.\u00a0 Yup.\u00a0 Each browser produces a different result.\u00a0 The Twitter thread has more examples.<\/p>\n<p>This is yet another example of how CSS and cross-browser compatibility can drive a web developer insane.<\/p>\n<!-- google_ad_section_end -->\n","protected":false},"excerpt":{"rendered":"<!-- google_ad_section_start -->\n<p>Martijn Cuppens tweets the link to this code snippet and a screenshot of how the code renders in different browsers.\u00a0 Yup.\u00a0 Each browser produces a different result.\u00a0 The Twitter thread has more examples. This is yet another example of how CSS and cross-browser compatibility can drive a web developer insane.<\/p>\n<!-- google_ad_section_end -->\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"The div that looks different in every browser #WebDev #CSS #HTML #browsers #standards","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[20,1517,1190,1216,1330],"keyring_services":[],"class_list":["post-28660","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-browsers","tag-css","tag-html","tag-standards","tag-web-development"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":22412,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/08\/20\/modernizr-avascript-library-that-detects-html5-and-css3-features-in-the-browser\/","url_meta":{"origin":28660,"position":0},"title":"Modernizr &#8211; JavaScript library that detects HTML5 and CSS3 features in the browser","author":"Leonid Mamchenkov","date":"August 20, 2014","format":"link","excerpt":"Modernizr - JavaScript library that detects HTML5 and CSS3 features in the browser.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28197,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/11\/08\/a-look-back-at-the-history-of-css\/","url_meta":{"origin":28660,"position":1},"title":"A Look Back at the History of CSS","author":"Leonid Mamchenkov","date":"November 8, 2017","format":false,"excerpt":"\"A Look Back at the History of CSS\" is a nice trip down the history lane as to where and how CSS came about.\u00a0 It's hard to imagine these days that CSS wasn't always around and the web looked like whatever your browser decided to make it look like.","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"Screenshot of Apple.com website","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2017\/11\/apple-500x420.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":22145,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/07\/07\/browser-support-for-urls-beginning-with-double-slash\/","url_meta":{"origin":28660,"position":2},"title":"Browser support for URLs beginning with double slash","author":"Leonid Mamchenkov","date":"July 7, 2014","format":false,"excerpt":"For some reason, I keep forgetting if double slash URLs are supported in older browsers or not. \u00a0Maybe if I post the answer from this StackOverflow\u00a0question here, I will remember it myself next time: This behavior was part of RFC 1808 (Section 4) which is about 16 years old, so\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28339,"url":"https:\/\/mamchenkov.net\/wordpress\/2018\/01\/19\/crooked-style-sheets\/","url_meta":{"origin":28660,"position":3},"title":"Crooked Style Sheets","author":"Leonid Mamchenkov","date":"January 19, 2018","format":false,"excerpt":"Crooked Style Sheets is a proof of concept for\u00a0website tracking\/analytics using only CSS and without Javascript. What can we do with this method? We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18921,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/12\/09\/browser-sync-keep-multiple-browsers-devices-in-sync-when-building-websites\/","url_meta":{"origin":28660,"position":4},"title":"browser-sync &#8211; Keep multiple browsers &#038; devices in sync when building websites","author":"Leonid Mamchenkov","date":"December 9, 2013","format":"link","excerpt":"browser-sync - Keep multiple browsers & devices in sync when building websites","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18820,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/11\/20\/high-resolution-browser-logos\/","url_meta":{"origin":28660,"position":5},"title":"High resolution browser logos","author":"Leonid Mamchenkov","date":"November 20, 2013","format":false,"excerpt":"GitHub Explore daily email brought in this awesome repo today. \u00a0It's a collection of high resolution web browser logos with transparent backgrounds. \u00a0 It's not just the five or six major browsers. \u00a0The collection covers more than 50 (!!!) different browsers, with different logos for different versions. \u00a0This is one\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"browser logos","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2013\/11\/browser-logos-500x215.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/28660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=28660"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/28660\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=28660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=28660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=28660"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=28660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}