Broken CSS

Posted on July 11, 2018 | http://p0wel.ly/2o

Following this tweet I thought I would collate these examples of how the same code (CSS) can render completely differently on different browsers.  A problem people often face when building a website.  While usually its a case of items not lining up or not quite being the same size, these examples show more extreme cases.

This demonstrates how important it is to test your website on multiple devices, if you do not have access to the physical devices then websites like browsershots.org can be helpful.

 

html {
display: table;
height: 100%;
width: 100%;
}

body {
display: table-cell;
vertical-align: middle;
}

div {
margin: auto;
width: 100px;
height: 100px;
outline: inset 100px green;
outline-offset: -125px;
}

https://codepen.io/MartijnCuppens/pen/MXojmw

 

span {
  outline: solid green 25px;
  outline-offset: -35px; /* Any value that makes sure the outlines collide ( < -25px )
                            would make the test valid,
                            -35px is just one such value that happens to make the failures pretty.
                            I recommend looking at this test in as many UAs as possible,
                            the results are quite astonishing.
			  */
  color: red;
}
div {
  width: 50px;
  height: 50px;
  padding: 25px;
  background: green;
  line-height: 25px;
  font-size: 25px;
  font-family: Ahem;
}

http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/html/outline-016.htm

html {
display: table;
height: 100%;
width: 25px;
margin: auto;
}

body {
display: table-cell;
vertical-align: middle;
}

div::before {
line-height: 25px;
font-size: 25px;
content: "  ";
background: white;
}
div {
display: inline;
outline: 25px ridge white;
outline-offset: -40px;
border: 25px dotted #ABABAB;
}

https://codepen.io/frivoal/pen/vroNqm

--

Andy Powell is a website specialist with 20 years experience, he is also the founder of Hack Oldham, a non profit co-working and maker space, a digital trainer and a maker of things.

If you found this post useful you could show you're appreciation by buying me a coffee.

No Replies to "Broken CSS"


    Got something to say?

    Some html is OK

    This site uses Akismet to reduce spam. Learn how your comment data is processed.