Difference between revisions of "Explain/CSS"

Revision as of 21:08, 26 June 2023

He wasn't kidding...

under construction

Cascading Style Sheets (often shortened to CSS) is a stylesheet language used to alter the appearance of HTML elements on webpages. Its standard is maintained by an organization known as W3C, and it is responsible for specifying the vast majority of the visual layout of the modern Internet. On The Wiki Camp 2,

Use on the wiki

Out of the box, MediaWiki allows editors to include inline styles with HTML tags which doesn't allow for use of selectors. Without any extensions, in order to make use of CSS selectors, you have to add the rules to MediaWiki:Common.css. The Wiki Camp 2 wiki has several extensions installed which allow for easier use of CSS on individual pages.

The CSS extension introduces a parser tag which can be used to add CSS to a single page. However, some CSS features are disabled[wc:filtered] within the parser tag, most notably the url() function — a function for including files which is required for things[wc] such as background images, cursors, and custom fonts. The TemplateStyles extension allows all[check] features of CSS to be used, but can only be applied to the article body. Instead of having the CSS placed directly in the target page's source, the CSS lives in a template and is added to pages using a <templatestyles/> tag. The CSS templates have a special "Sanitized CSS" content model that filters any invalid or unrecognized CSS code from being saved to the page.

Early uses

Early use of CSS involved rather simple changes to page stylings. One of the earliest instances of using CSS to majorly alter the layout was Template:Fuck2, a template which uses CSS to remove all of the site navigation, leaving only the wiki page's content and title. The page The children are gone. the first page to make use of this template, and over 100 others have made use of it since for the immersive experience it gives.

Color pages

See also: Explain/Color pages

An early trend in pages which utilized CSS was pages titled with the name of a color which used basic CSS to change the page's background color to that color.

Askew pages

See also: Explain/Askew

the first askew page was likely a reference to Google's askew Easter egg; searching for the word "askew" on Google will take you to a search page which is tilted slightly to the left. The first version of the first askew page (which can be accessed here) used an image to create the illusion of being tilted, but it would later utilize a CSS transform to actually rotate the page and preserve the functionality. After this change, many other rotated pages started being created; these included sequels to askew such as askewier, but also askew versions of pages like Skeletons in media/Skewed. A full list of these pages can be found at the page list of askew pages.

Pages which animated rotation also started being created, such as Do a Barrel Roll! (a reference to Google's "do a barrel roll" Easter egg) or Earthquake which added screen shake.

Rotating cubes

See also: Explain/Rotating CSS cubes

There is a feature of CSS which allows elements to be rotated in 3D; rotating cubes are commonly used as an example of this, though they are not commonly used in actual web design. The first page to use a CSS cube was cube, and since then there have been many other pages which copied the code and placed different things on the faces.

Click and drag games

Aesthetic templates

Skins

Notable Pages

Notable uses of CSS during the wiki's lifespan.

Damn seal

Other notable pages

try keep this section in chronological order cause its supposed to be like a timeline of notable events

Peanuts - one of the first pages to use Template:Fuck2, setting the baseline for what shenanigans are possible.
Tombstone - uses a mix of CSS formatting and cropped images to replicate the TV Tropes format. One of the first examples of "overhauling" a wiki page into a completely different format.
9150625 - notable for it's use of "flippant" text, where hovering over it reveals different text underneath.
Cube - the first page to use a Rotating CSS Cube, later a common staple.
Anyone Who’s Played Candy Crush Level 87 Understands That the Idea of a Compassionate God Is a Naive One - overhauls the page to resemble a Carrd webpage.
Error logs - overhauls the wiki format to replicate the general style of Jon Bois' 17776. See also Host/Houston Omniversal Science and Technology, which replicates the intro of 17776.
The Category:Nerpa Dust in the Wind 🍃 family of pages - consists of many variations on a theme across multiple CSS parlor tricks
Talk:King cake - combined several CSS animations into a single experiences, okin to Damn seal
Train - uses CSS animations that make different trains move across the screen. The animations have since turned into a template.

some notes for writing I just want to put here

Other things:

filter being enabled
- xerox
maybe split some stuff out into a history section?
How most pre-aesthetic entries looked
- Like they were like a custom website almost
what things are animated with css

maybe split Other notable pages into challenge and non challenge? idk about that one though

@@ Line 10: / Line 10: @@
 ==Use on the wiki==
-Out of the box, MediaWiki allows editors to include inline styles with HTML tags which doesn't allow for use of selectors. Without any extensions, in order to make use of CSS selectors, you have to add the rules to [[MediaWiki:Common.css]]. The Wiki Camp 2 wiki has several extensions installed which allow for easier[wc] use of CSS on individual pages. The CSS extension adds a parser tag which can be used to add CSS to a single page. The TemplateStyles extension [...].
+Out of the box, MediaWiki allows editors to include inline styles with HTML tags which doesn't allow for use of selectors. Without any extensions, in order to make use of CSS selectors, you have to add the rules to [[MediaWiki:Common.css]]. The Wiki Camp 2 wiki has several extensions installed which allow for easier use of CSS on individual pages.
-One of the earliest instances of using CSS to majorly alter the layout was [[Template:Fuck2]], a template which uses CSS to remove all of the site navigation, leaving only the wiki page's content and title.
+The CSS extension introduces a parser tag which can be used to add CSS to a single page. However, some CSS features are disabled[wc:filtered] within the parser tag, most notably the url() function — a function for including files which is required for things[wc] such as background images, cursors, and custom fonts. The TemplateStyles extension allows all[check] features of CSS to be used, but can only be applied to the article body. Instead of having the CSS placed directly in the target page's source, the CSS lives in a template and is added to pages using a <code><nowiki><templatestyles/></nowiki></code> tag. The CSS templates have a special "Sanitized CSS" content model that filters any invalid or unrecognized CSS code from being saved to the page.
 ===Early uses===
+Early use of CSS involved rather simple changes to page stylings. One of the earliest instances of using CSS to majorly alter the layout was [[Template:Fuck2]], a template which uses CSS to remove all of the site navigation, leaving only the wiki page's content and title. The page [[The children are gone.]] the first page to make use of this template, and over 100 others have made use of it since for the immersive experience it gives.
 ====Color pages====
 : ''See also: [[Explain/Color pages]]''
+An early trend in pages which utilized CSS was pages titled with the name of a color which used basic CSS to change the page's background color to that color.
 ====Askew pages====
 : ''See also: [[Explain/Askew]]''
+the first askew page was likely a reference to Google's askew Easter egg; searching for the word "askew" on Google will take you to a search page which is tilted slightly to the left. The first version of the first askew page (which can be accessed [[Askew/Original|here]]) used an image to create the illusion of being tilted, but it would later utilize a CSS transform to actually rotate the page and preserve the functionality. After this change, many other rotated pages started being created; these included sequels to [[askew]] such as [[askewier]], but also askew versions of pages like [[Skeletons in media/Skewed]]. A full list of these pages can be found at the page [[list of askew pages]].
+Pages which animated rotation also started being created, such as [[Do a Barrel Roll!]] (a reference to Google's "do a barrel roll" Easter egg) or [[Earthquake]] which added screen shake.
 ===Rotating cubes===
 : ''See also: [[Explain/Rotating CSS cubes]]''
+There is a feature of CSS which allows elements to be rotated in 3D; rotating cubes are commonly used as an example of this, though they are not commonly used in actual web design. The first page to use a CSS cube was [[cube]], and since then there have been [[:Category:Pages containing a rotating css cube|many other pages]] which copied the code and placed different things on the faces.
 ===Click and drag games===