Let’s say you own a website with 2 webpages and you wish to install a third-party plugin to create a newsfeed
on each page. In this case, I am the author of the newsfeed plugin that you have chosen. Below is a sample of
how the plugin is embedded:
<div class="container"> <!-- container element provided by you on your website -->
<script src="https://example.com/newsfeed.js"></script>
<!-- my plugin renders everything inside the container -->
</div>
Using an analogy, the website is like a two-storey house with you as the landlord and the plugin is like a tenant
renting a room on the second floor of your house. The equivalent of the sample embed code is as follows:
<room> <!-- room provided by you in your house -->
<tenant></tenant> <!-- the tenant, i.e. me, with all my luggage and stuff -->
</room>
Being a nice landlord, you allow your tenant to paint the walls of his room if he so wishes. How would you feel if he paints your whole house red? It’s like the plugin targeting the document instead of itself, like so:
<html>
<head>
<!-- The original style of your website -->
<style>
body {
background: white;
}
</style>
</head>
<body>
<div class="container">
<script src="https://example.com/newsfeed.js"></script>
<!-- Style inserted by plugin -->
<style>
body {
background: red;
}
</style>
</div>
</body>
</html>
After hiring a contractor to repaint the walls and explaining to your tenant that he should only target his room and not other rooms or worse still, the house, another issue crops up – laundry. He bought a clothes line and instead of hanging the clothes inside the room, he sets up the clothes line outside the room and showcases his dirty linen in public. This is like the plugin adding a CSS class on the container element using Javascript, like so:
<html>
<head>
<!-- The original style of your website -->
<style>
.container {
border: 1px solid white;
}
</style>
</head>
<body>
<div class="container feed"> <!-- "feed" class added by plugin -->
<script src="https://example.com/newsfeed.js"></script>
<!-- Style inserted by plugin -->
<style>
.feed {
border: 1px solid black;
}
</style>
</div>
</body>
</html>
A few months have passed by without incident. Your birthday is coming up and all your tenants decided to create a present for you – an A3-sized cardboard decorated with small Post-It notes containing well-wishes from each tenant. The cardboard is finally passed to me, the last tenant, to stick the final Post-It note, before presenting it to you. I then take a A3-sized piece of paper, write “Happy Birthday!”, and glue it on the cardboard, which effectively covers/destroys the notes from the other tenants. This is like the plugin covering the document and setting an arbitrarily high z-index, like so:
<html>
<head>
<!-- The original style of your website -->
<style>
.container {
height: 27vw; /* 16:9 ratio */
margin: 0 auto;
width: 48vw;
}
</style>
</head>
<body>
<div class="container feed"> <!-- "feed" class added by plugin -->
<script src="https://example.com/newsfeed.js"></script>
<!-- Style inserted by plugin -->
<style>
.feed {
height: 100vh;
width: 100vw;
position: absolute;
z-index: 2147483647;
}
</style>
</div>
</body>
</html>
You receive the present in shock and disbelief. I explain that there was no more space. While trying your level best to keep calm, you reply that it would have been acceptable if I used a Post-It note and covered a bit of the other notes, having been pasted last and on top. While the other tenants took the time to pen poems on the tiny Post-It notes, I only wrote 2 words and used more space than I needed.
This article is a reminder to those of us who write plugins/libraries/components for others to use on their websites, e.g. feeds, slideshows, video players, etc. Our plugins are just renting space on the users’ websites and the onus is on us to write our CSS responsibly in order to play nice with other plugins on the same sites as well as not to mess up the styling of those sites. Below is a sample of how the CSS could be rewritten for the misbehaving plugin – ad huc!
<html>
<head>
<!-- The original style of your website -->
<style>
body {
background: white;
}
.container {
border: 1px solid white;
height: 27vw; /* 16:9 ratio */;
margin: 0 auto;
width: 48vw;
}
</style>
</head>
<body>
<div class="container">
<script src="https://example.com/newsfeed.js"></script>
<!-- Style inserted by plugin -->
<style>
/* use a vendor prefix to prevent clashes with plugins or the site */
.zn-newsfeed-wrapper {
background: red;
border: 1px solid black;
height: 100%;
position: relative;
width: 100%;
}
/* Use only the space you need */
.zn-newsfeed-note {
height: 100px;
position: absolute;
width: 100px;
z-index: 10; /* use a reasonable value */
}
</style>
<!-- Element inserted by plugin to wrap around all its stuff -->
<div class="zn-newsfeed-wrapper">
<div class="zn-newsfeed-note">Happy Birthday</div>
</div>
</div>
</body>
</html>