User:Wordfa/MetaWeb
About
A CSS style sheet to be used with Scratch that shows the hidden parts of webistes
Made by Fred & Kim for SI26 [See Kim's Wiki for their continued work]
Gallery
Facebook
Code
/* use * to select all elements of any type inside of the body and hide them */
body * {
visibility: hidden;
font-size: 0;
height: 0;
width: 0;
}
/* select the head element from the html document and display its children underneath each other */
head {
display: flex !important;
flex-direction: column;
width: 65vw;
overflow-x: hidden;
margin: auto;
}
/* make sure the elements meta, link, script and title from the head are displayed visibly on the page */
meta, link ,script, title {
display: block;
margin: 0px !important;
padding: 0px !important;
}
/* select all elements of any type and style them */
* {
background: black !important;
font-family: monospace !important;
font-size: 1vw;
}
/* on hover, change the font size to 2 viewport width */
*:hover {
font-size: 2vw;
}
/* select the script tag and make sure it is visibly displayed: set its display to block and opacity to 1 */
script {
display: block !important;
opacity:1 !important;
color:blue;
width: 65vw;
margin: auto !important;
}
/* use the pseudo-element ::before to insert the word 'script' before every displayed script element */
script::before {
content: 'script -> '
}
/* select the script tags src attribute (written in [ ] ) and add ::after pseudo-element. This allows us to add the script src as content to the page.
We again use the content property with a value of attr(src) where attr is targets the elements attribute and src specifies the source attribute */
script[src]::after {
content: attr(src);
}
/* make sure all scripts inside the body are displayed, have a height and visible font size */
body > script {
visibility: visible !important;
font-size: 0.5vw;
height: fit-content;
width: 65vw;
}
/* on hovering over them all scripts inside of the body have a font-size of 2 viewport width */
body > script:hover {
font-size: 2vw;
}
/* make sure all scripts in the body footer are displayed on the page too */
footer > script {
visibility: visible !important;
height: fit-content;
font-size: 0.5vw;
width: 65vw;
margin-left: 17.5vw !important;
}
/* select all direct children of the document head that are meta tags and make sure they are displayed on the page setting display to block */
head > meta {
display: block !important;
color: red;
}
/* select all meta tags that have the attribute 'name' and their content. Adding the pseudo-element ::after to our selector allows us to insert content after the meta tag.
Inside the declaration, the property 'content' specifies the content we want to insert. 'attr' stands for attribute and in parentheses we define which part of the attribute we want to display*/
meta[name][content]::after {
content: attr(name) " -> " attr(content);
}
/* we do the same as one line above, but instead of meta tags that have 'name' we select meta tags that have 'property' */
meta[property][content]::after {
content: attr(property) " -> " attr(content);
}
/* this selects the title element from the website head and makes sure its displayed */
title {
display: block;
color: yellow;
}
/* use the ::before pseudo-element to insert 'title' before every displayed title on the page */
title::before {
content: 'title -> '
}
/* select every link tag from the head and make sure it is displayed on the page in its own line */
link {
display:block;
padding: 1vw;
}
/* We select every link tags that has a 'rel' and an 'href' attribute. Adding the pseudo-element ::after lets us insert content after this tag into the html.
Inside the declaration we use the property content and in its values specify the attributes we want to display */
link[rel][href]::after {
content: attr(rel) " -> " attr(href);
color: green;
}
/* select all direct children of the document head that are style tags and make sure they are visible */
head > style {
display: block;
color: magenta
}
/* use the ::before pseudo-element to insert the description of 'internal styles' before each <style> element */
style::before {
content: "internal styles -> ";
}