The Power of CSS

I love CSS…

It has the power to completely change the user experience of a website; for better or for worse.

Something I am most guilty of is utilizing CSS to make changes that should really take place on the HTML or server level.

The two most powerful attributes (in my opinion), are the following:

#someID {
  /* Remove the element from the flow of the page (still appears on the DOM) */
  display: none;
}

#someOtherID {
  /* Hides the element, but still occupies the same amount of space */
  visibility: hidden;
}

A simple body { display: none } can completely destroy a page – see my test here: https://365cloudblog.com.au/test-post/.

You can see with the above, the page still exists in its entirety, but it is a simple attribute that has completely eliminated appropriate usage.

I like to look at the hypotheticals… imagine if I was a hacker and had access to a specific stylesheet.

Here is my attempt: https://365cloudblog.com.au/test-hacked-page/.

All CSS code:

/* Hide the body */
body {
    visibility: hidden;
/* Make the background spooky.. */
    background: black;
    background-image: url(https://365cloudblog.com.au/wp-content/uploads/2021/11/hacker-g5b21d0d83_1920-1536x1024.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 8%;
}

/* Show the body pseudoselector */
body:before {
    visibility: visible;
    content: 'You have been hacked!!';
    display: flex;
    color: #7be31a;
    font-size: 180%;
    justify-content: center;
}



/* Menu was still showing with a "visibility:hidden".. this should do the trick */
.primary-menu-container {
    display: none;
}

Imagine being hacked by a stylesheet.. the opportunities are limitless..