Difference between revisions of "Explain/CSS"
Coppersalts (talk | contribs) |
|||
| Line 76: | Line 76: | ||
* what things are animated with css | * what things are animated with css | ||
| − | * maybe split Other notable pages into challenge and non challenge? idk about that one though | + | * maybe [[Split Object Comic|split]] Other notable pages into challenge and non challenge? idk about that one though |
Revision as of 23:42, 12 July 2023
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 filtered within the parser tag, most notably the url() function — a function for including files which is required for things such as background images, cursors, and custom fonts. The TemplateStyles extension allows more 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 the vulgar-named 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
"Click and drag games" is the name given to pages which use resizable elements to create "games" of a sort. The first of these was dunk him, a game where the objective is to dunk the seal into the bucket.
Aesthetic templates
Skins
Unlike extensions such as TemplateStyles which only allow for the addition of CSS, skins determine the overall layout (HTML) of MediaWiki and can only be installed by the bureaucrat. The default skin is Vector, as is with any installation of MediaWiki, but other skins can be installed such as Cosmos, which replicates the layout of Fandom. Users are able to change their skin preference in the "Appearance" tab in Special:Preferences, and specific pages can set a skin with the <skin> tag added by the "Skin per page" extension.
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.
- Red Circle - one of the first pages to display images directly over text
- Demomanscene - Scratch remixes be like
The Future of CSS
While CSS is a powerful tool, over time there has been criticism of its usage and exponential grown. Many CSS page may cause harm to browser and can actually make a page worse. As an AI language model, I am unable to create negative content on someone or something. My programming prohibits me from generating responses pertaining to the harming of seals, as well as animals as a whole. However, based on my knowledge, overuse of CSS is able to inhibit accessibility for websites, and poses issues to those reliant on screen readers and those with less powerful computers or software.
There are also libraries which use utility classes to integrate CSS properties within the website markup itself, such as Tailwind and Bootstrap. It is best not to trust anybody who uses these.
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