Login
Login

WT:Catalogue of CSS classes#@keyframes

Section Zero

Very worthwhile. It would be good to identify the classes that are built into the main skins that come with MediaWiki (monobook/main.css, etc), and the ones that have been added to the editor-accessible stylesheets in this project (Monobook.css, etc). Or is this list only for the latter? —Michael Z. 2006-02-03 06:38 Z

:It's for both. --cesarb 14:17, 3 February 2006 (UTC)

Defined at vs Used by confusion

I personally am quite confused by when to put a mention of a class or id in the Defined at column and when in the Used by column. My guess was that CSS classes are defined by code in CSS files like #spoiler { border-top: 2px solid #ddd; } and used in HTML or wikicode like class="spoiler", and IDs are reversed; they are defined by HTML id="bar", and used in CSS files. But maybe I got this backwards. In any case, it would be very helpful if this was defined(no pun intented) at the top of the page. JesseW, the juggling janitor 08:10, 17 March 2006 (UTC)

:I agree, they are confusing. If you can suggest better names for the columns, go ahead (but they should be the same in both the classes and the IDs tables, to make it easier to follow). The introduction also needs some editing; I wrote it mostly as a quick placeholder. --cesarb 02:24, 26 March 2006 (UTC)

::Er, did I get them backwards, or is my understanding correct? If it is, we could just name the columns In CSS and In HTML, which I think would be clearer, unless that's wrong... JesseW, the juggling janitor 02:37, 26 March 2006 (UTC)

:::Yes, "in CSS" and "in HTML" would be correct almost all the time... Except in the couple of places where one or both of the columns are in fact "in JS" (where the code both uses the classes as markers and creates elements with the classes; mostly the "Dynamic Navigation Bars" stuff). I think I'll do it as you suggested and simply add a footnote. --cesarb 18:37, 26 March 2006 (UTC)

::::Well, my understanding of the javascript use is that it falls into the CSS or HTML form as well; if the JS uses the DOM to define an ID, that's "In HTML", if it uses the DOM to define the style attribute, that's "In CSS". Thanks for making the change, in any case. JesseW, the juggling janitor 01:03, 27 March 2006 (UTC)

Linking to source code mentions

How should we link to mentions of the classes and IDs in MediaWiki source code. While line #s do change, so can all the other information in the page, and line #s provide a very useful way to link to the specific mention in question. We could link to sf.net cvs browser, which would let us link to specific versions of the code... JesseW, the juggling janitor 08:16, 17 March 2006 (UTC)

:A way to avoid the problem would be to mention not the line number but the function name; however, there's still the problem that it bloats the (already very long) table considerably. Finding the correct files is the hard part; after that, it's easy to search within then for mentions of the class or ID. I'd prefer to link only to the files. --cesarb 02:24, 26 March 2006 (UTC)

::OK; as I don't see a particuarly elegant solution either, linking to the files only seems fine for now. JesseW, the juggling janitor 02:36, 26 March 2006 (UTC)

Some more source code bits to add sometime



/Users/jesse/FreeProjects/phase3/includes/Article.php:821:				  ''.$link.'' );


/Users/jesse/FreeProjects/phase3/includes/ChangesList.php:474:		$users = ' ['.implode('; ',$users).']';


/Users/jesse/FreeProjects/phase3/includes/DifferenceEngine.php:262:		$header = "
{$this->mOldtitle}
$userLink " .


/Users/jesse/FreeProjects/phase3/includes/EditPage.php:908:


/Users/jesse/FreeProjects/phase3/includes/EditPage.php:1079:			"
" . $wgOut->parse( wfMsg( $msg ) ) . "
\n";


/Users/jesse/FreeProjects/phase3/includes/ImageGallery.php:95:		$s = '
';
/Users/jesse/FreeProjects/phase3/includes/ImageGallery.php:106:				$s .= '


' .


/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:114:		$r .= "{| id=mw_metadata class=mw_metadata\n";


/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:234:				$wgOut->addHTML( '
Citation classes
Does anyone know if these classes from MediaWiki:Common.css are still used in any templates?


.citation


cite.article


cite.contribution


cite.periodical


With HTML5, it is time to use <cite> correctly in our templates and style it as italic by default again. —Michael Z. 2013-02-27 21:40 z


:To follow up: all of these have been removed from common.css.   Gadget850 talk 20:49, 6 June 2013 (UTC)


    

  • 2015 Update: Styling it italic by default would be the {{em|wrong}} thing to do. See http://www.w3.org/2009/cheatsheet/#search,cite (or the full spec if you want to wait for it to load. The {{tag|cite}} element may contain any/all citation data, as long as at least one of a) author, b) title, or c) URL is present. The early HTML5 idea of limiting it strictly to titles was abandoned in late 2013.  But it never made sense to force-italicize it anyway, since only titles of major works (books, magazines, journals, feature films, albums, TV series, etc.) are italicized, not minor works (short stories, chapters, articles, short films, TV episodes, etc.); see MOS:TITLE, though this by no means WP specific, and is advised by all English-language style guides. A thread is open about this at Mediawiki talk:Common.css#The cite element needs to not auto-italicize any longer.  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  02:10, 25 August 2015 (UTC)
    • 

Notes for potential update
I think this is where some of the CSS is currently coming from. I'm not sure how much it replaces (in our table at Wikipedia:Catalogue of CSS classes#Stylesheets and JavaScript), or how many of those files each user downloads on articles/elsewhere? I'm tempted to just put this in a hatnote at the top of the documentation-section, as a stopgap pointer, but maybe there's a better short-term solution?


:Note: try searching through https://git.wikimedia.org/tree/mediawiki%2Fcore.git (Go to eg. /skins/vector/components/ and /skins/common/components/ for the current global sets).


Please assist or suggest, thanks! –Quiddity (talk) 05:15, 8 February 2014 (UTC)


:Boldly adding, now. –Quiddity (talk) 20:36, 15 April 2014 (UTC)
Name
This page remains incorrectly and misleadingly named. Not all the HTML classes used are for presentational (CSS) purposes. I recently moved the page to "Wikipedia:Catalogue of HTML classes", but have been reverted with an edit summary of "We have been over this last year". I don't recall discussing the new name previously; the page should be moved back to that name. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 13:01, 17 May 2014 (UTC)


:What are these "HTML classes" you speak of? HTML has class attributes, not classes. All the classnames on this page are associated with a set of CSS rules, and almost all of them have a presentational function. If you really are so concerned with semantics, then "Catalogue of CSS classnames" is what you want. But that term are used synonimously with "classes", so I see no point in this.  — Edokter (talk) —  14:05, 17 May 2014 (UTC)


::Then rename the page to "Wikipedia:Catalogue of HTML class attributes". If your claim that "almost all of them have a presentational function" is true, then my point that {{tq|"Not all the HTML classes used are for presentational (CSS) purposes"}} is proven. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 15:58, 17 May 2014 (UTC)


:{{replyto|Pigsonthewing}} See #Suggested move three threads above this one. --Redrose64 (talk) 15:53, 17 May 2014 (UTC)


::Nowhere in that section is the name "Wikipedia:Catalogue of HTML classes", nor indeed any name using the string "HTML" discussed. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 15:58, 17 May 2014 (UTC)


:::That's because this list is not associated with HTML in any way. These classes are defined in CSS files.  — Edokter (talk) —  16:51, 17 May 2014 (UTC)


::::The classes (I see we're back to "classes" not "class names") are all used in HTML documents; only some, but not all of them are styled (not defined) in CSS documents. If the HTML is rendered without stylesheets, the classes are still present and their semantic meaning can still be interpreted. Without the HTML documents, conversely, the references to the classes in stylesheets are meaningless and useless. Furthermore, it is the HTML specification which defines the class attribute. But thank you for confirming that we have not previously discussed renaming this page with "HTML" in the title. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 22:25, 17 May 2014 (UTC)


::::Classes are defined in HTML DOM, and are used as selectors in CSS. —TheDJ (talk • contribs) 07:35, 18 May 2014 (UTC)


:::::Be that as it may, they are primarily used as CSS selectors, and this page is a list of used selectors.  — Edokter (talk) —  11:43, 26 May 2014 (UTC)


::::::Concur with Edokter, I think. This page doesn't seem to have anythign to do with classes used in HTML that are not also used by our CSS.  Even classes people just add to templates on which no CSS is presently acting are generally added so that people can act on them in their own user-level CSS. What's the use case for a class here in HTML that is never touched by CSS?  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  00:49, 25 August 2015 (UTC)


Now that we've established what these classes are, with no refutation in the last week, when are we going to name the page correctly? Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 11:08, 26 May 2014 (UTC)


:We will rename it only after a consensus has been reached in an WP:RM discussion.  — Edokter (talk) —  11:43, 26 May 2014 (UTC)


What about something like Catalogue of Wikipedia classes? These are also used in wikicode, such as tables, without any HTML or CSS code visible to the editor, though it is technically fed to the browser as HTML. An alternative suggestion is Catalogue of Web classes, since Wikipedia is the namespace. Also, DHTML can include both HTML and CSS, if we want them both represented in the title. —PC-XT+ 02:41, 15 July 2014 (UTC) Or, to be specific, Catalogue of DOM classes... —PC-XT+ 02:45, 15 July 2014 (UTC)


:That might sound like "instructional courses"; class in this sense is a particular CSS-related technical term of art.  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  00:49, 25 August 2015 (UTC)


::Yeah, it would have to be DHTML or DOM classes... Even though there are classes that are used by JavaScript instead of CSS, CSS actually is the original/main use for classes, so it may be best to leave it here. —PC-XT+ 06:02, 15 February 2016 (UTC)
references-small
Where is references-small defined? It is no longer in MediaWiki:Common.css. -- Gadget850 talk 12:02, 28 April 2015 (UTC)


:Since {{tag|references|s}} and {{tlx|reflist}} now have the same font size (instead of {{tag|references|s}} being full size), I guess it's been moved from the site css to the main css. Wherever that is. --Redrose64 (talk) 13:09, 28 April 2015 (UTC)


::It no longer exists; the page is just out of date. Anything marked "deprecated" should be removed. -- User:Edokter]] {{talk}} 13:49, 28 April 2015 (UTC)


:::Anyone remember what the font size was? 90%? There are a lot of tables using this class. Is there an equivalent class? -- Gadget850 talk 23:47, 30 April 2015 (UTC)


::::It was 90%. Now, all references are 90%. -- User:Edokter]] {{talk}} 08:51, 1 May 2015 (UTC)


:::::Found the change where it was removed on 10 Dec 2010.[https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&diff=403515579&oldid=403494668] Still about 8,000 uses. {{search link|insource:/references-small/i}} It is used to style a large number of tables. See Hispanidad#Hispanic countries for example. -- Gadget850 talk 11:54, 1 May 2015 (UTC)


:::::Regardless, got my answer. -- Gadget850 talk 12:19, 1 May 2015 (UTC)


::::::That was a misuse of a references-formatting class as a general-purpose "small-izing" class, anyway. I don't think we should feel bad about it not working when people do the wrong thing with it, either in the sense of using a class incorrectly, or in the sense of ignoring MOS and making entire tables full of information hard to read for no reason, especially since the same table includes not just {{tag|sup|o}}, which is smaller still, but even {{tlx|smallsup}} which is really small, made yet smaller by being nested inside a whole table being made smaller-text than normal.  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  02:05, 25 August 2015 (UTC)
Dead links, so where are these files?
All the svn.wikimedia.org links, e.g. for common/shared.css, common/commonPrint.css, monobook/main.css, etc., now just go to an empty search form at phabricator.wikimedia.org [https://phabricator.wikimedia.org/diffusion/?view=markup], and it does not appear to actually be usable to find the files in question. I tried using it to find anything named "shared.css" for example, and it did not work. It's not clear what repositories they all live in. When one can be tracked down specifically, e.g. IE60Fixes.css under MonoBook/ (which shows up as "rSMNb/" when you click on it), under mediawiki-skins (which shows up as "rSKIN/" when you click on it), under "rSKIN mediawiki-skins" (which shows up just as "mediawiki-skins" when you click on it), it's not clear if there is any permanent URL for any file. The ones there have names like https://phabricator.wikimedia.org/diffusion/SMNB/browse/master/;8ae217e9db264a87a90ba39458b78fc436103fb4 which may be URLs to specific commits, I'm not sure. (Git is not my forte; I was more of an Snv guy, and still miss CVS sometimes. :-)  None of these things have consistent paths anyway: The Phabricator URL https://phabricator.wikimedia.org/diffusion/SKIN/ corresponds to the Git URL https://gerrit.wikimedia.org/r/p/mediawiki/skins  etc.


Weirdly, there are two MonoBook repositories:


    

  • "rSMNB MonoBook" repository (a.k.a. "MonoBook") = https://phabricator.wikimedia.org/diffusion/SMNB/ = git clone https://gerrit.wikimedia.org/r/p/mediawiki/skins/MonoBook
    • 

  • "rSKIN mediawiki-skins" (a.k.a. "mediawiki-skins") = https://phabricator.wikimedia.org/diffusion/SKIN/ = git clone https://gerrit.wikimedia.org/r/p/mediawiki/skins and it contains "MonoBook/" (a.k.a. "rSMNB/") at https://phabricator.wikimedia.org/diffusion/SMNB/browse/master/;8ae217e9db264a87a90ba39458b78fc436103fb4 (presently) with no git clone address specifically for it; it's unclear if the MonoBook files in these two repositories are identical.
    • 



At this point, I'm not sure how to find the CSS files referenced at Wikipedia:Catalogue of CSS classes other than by cloning all of the phabricator repositories locally, and doing a local file search. This is really suboptimal when it comes to things like just trying to figure out where our 
  • ...
 bullet is being styled, or whatever.  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  01:50, 25 August 2015 (UTC)


PS: The search thing at https://git.wikimedia.org/tree/mediawiki%2Fcore.git isn't helping much; if you search for all the ".css" files, it instead pulls up every mention ever on the system of that character string [https://git.wikimedia.org/search/?s=.css&r=mediawiki/core.git&st=COMMIT]. Individually searching for, e.g., "common/shared.css" allows one to narrow down to a smaller number of discussions [https://git.wikimedia.org/search/?s=common/shared.css&r=mediawiki/core.git&st=COMMIT], but I think it will still be more expedient to clone everything and just do filename searches locally.  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  01:56, 25 August 2015 (UTC)


:The point being, it would be most optimal if this page were updated to help us locate all the CSS that WP is loading.  — SMcCandlish ☺ ☏ ¢ ≽ʌⱷ҅ᴥⱷʌ≼  10:15, 8 September 2015 (UTC)


::I understand your point, but the CSS files as such no longer exist really. They are basically fragments and modules that collectively construct a dynamically generated CSS file for delivery. Checking out the code is probably indeed the best way to find things and a web inspector is the very best way to find such information. But I'll see if I can make a breakdown at least at the directory level. —TheDJ (talk • contribs) 11:49, 8 September 2015 (UTC)


:::Thanks for your work below, TheDJ.  It's helpful, and I hope it finds a home. — CpiralCpiral 20:56, 17 December 2015 (UTC)


::To locate all the CSS pages in a namespace, use the search parameter intitle.  For example {{sl|wp:intitle: css}} and {{sl|MediaWiki: intitle: css}}.  To AND terms, use two intitle.  Intitle won't OR.  — CpiralCpiral 20:56, 17 December 2015 (UTC)
= An introduction =
== Repo's ==
    

  1. The primary Git repo's are HOSTED on gerrit.wikimedia.org
    2. 

  2. gerrit.wikimedia also hosts our code review
    3. 

  3. git.wikimedia.org hosts a web interface for browsing the repo, but it is slowly being deprecated
    4. 

  4. Phabricator hosts mirror's of our repo's code and the NEW web browsing interface for it.
    5. 

  5. In  a link like: https://phabricator.wikimedia.org/diffusion/SMNB/browse/master/;8ae217e9db264a87a90ba39458b78fc436103fb4 the last number refers to the ID of the revision that you are viewing. Removing it always shows you the current revision.
    6. 

  6. Each skin and extension is in it's own repository.
    7. 

  7. rSKIN aka mediawiki-skins aka /skins [at the directory level of an installation] is a repository with submodule pointers towards the various individual skin repositories.
    8. 

  8. Similarly rMEXT aka extensions aka /extensions is a repository with pointers to the various extensions.
    9. 

= The code =
    

  1. Basically any CSS file as mentioned on the page no longer exists.
    2. 

  2. Instead we have several hundred files in many places, with many distinct purposes. (specifically for core alone [so without skins, extensions and 'external' libraries], 58 css files, 25 less files [which produce CSS], as well as some 146 or so javascript files, 176 json files etc etc).
    3. 

  3. Skin specific CSS is now in the the skins repo's, or when specific to an extension, listed as a 'skinStyles' in the relevant resource loader module of that extension. Mobile is 'special', in that much of it resides in MobileFrontend extension.
    4. 

  4. CSS can be for either print  or screen media and these are often separate.
    5. 

  5. CSS can be marked as compatible for either mobile or desktop.
    6. 

= The structure =
    

  • /[https://phabricator.wikimedia.org/diffusion/SKIN/browse/master/ skins]
    • 

  • /skins/individual skins (except for mobile)
    • 

  • /skins/[https://phabricator.wikimedia.org/diffusion/SVEC/browse/master/ Vector]
    • 

  • /skins/[https://phabricator.wikimedia.org/diffusion/SMNB/browse/master/ Monobook]
    • 

  • Skins have CSS that mostly deals with the looks of the
    • 

  • /[https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/ resources]
    • 

  • /resources/[https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/Resources.php Resources.php] - defines all core ResourceLoader modules. The above mentioned targets, skinStyles, and media markers and dependencies are set here.
    • 

  • /resources/[https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/lib/ lib] - All third party libraries that we use but do not 'own'. jQuery is here for instance.
    • 

  • /resources/[https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/ src] - All code that is mediawiki specific or not a separate library
    • 

  • /[https://phabricator.wikimedia.org/diffusion/MEXT/browse/master/ extensions]
    • 

= 6 years later =
The page is still full of dead links.



Is there a way to check what classes are available, and what definitions they include, on this wiki as well as on other wikis? Taylor 49 (talk) 17:31, 29 September 2021 (UTC)


:Not really, there are 10s of thousands of classes spread out over hundreds of repositories. The best tool as always is to use the web inspector of your browser. —TheDJ (talk • contribs) 17:46, 29 September 2021 (UTC)


:: Thanks ... is it really necessary to make it so complicated? Taylor 49 (talk) 17:53, 29 September 2021 (UTC)


:::Welcome to CSS. – The Grid (talk)  20:06, 23 July 2022 (UTC)
Cite error
Below the "Stylesheets and JavaScript" table, directly above the "Page/action specific" subheader: Cite error: The named reference ul was invoked but never defined (see the help page).


The reference marks that point there are in the "Stylesheets and JavaScript" table and look like [J 1]. --SoledadKabocha (talk) 23:05, 18 August 2020 (UTC)


:I have recovered and restored the note. — JohnFromPinckney (talk) 11:15, 19 August 2020 (UTC)


::The note is technically incorrect. Gadgets can be enabled for all users, even ones who are unregistered. --Izno (talk) 21:36, 19 August 2020 (UTC)


::: Then it needs to be removed from the 19 places where the note has been applied. Yeah? — JohnFromPinckney (talk) 06:09, 21 August 2020 (UTC)


:::: I did use the word "technically". A slight reword might be preferable. --Izno (talk) 20:53, 21 August 2020 (UTC)
"Catalogue of IDs" listed at [[Wikipedia:Redirects for discussion|Redirects for discussion]]
30px


A discussion is taking place to address the redirect :Catalogue of IDs. The discussion will occur at Wikipedia:Redirects for discussion/Log/2021 January 23#Catalogue of IDs until a consensus is reached, and readers of this page are welcome to contribute to the discussion.  𝟙𝟤𝟯𝟺𝐪𝑤𝒆𝓇𝟷𝟮𝟥𝟜𝓺𝔴𝕖𝖗𝟰 (𝗍𝗮𝘭𝙠) 13:06, 23 January 2021 (UTC)
@keyframes
I want to use @keyframes to add a little animation of a tag but for wiki pages:


    

  • It is impossible to add @keyframes code in the style attribute.
    • 

  • It is impossible to edit the Vector skin CSS source files for non-admin users.
    • 

  • It is impossible to become an admin.
    • 

  • It is a very tedious task to request every change here.
    • 



How the heck can I use @keyframes? Harsh Rathod Poke me! 12:16, 28 May 2021 (UTC)


:To bullet 1: [//www.w3.org/TR/css-animations-1/#keyframes the @keyframes at-rule] can only go in a style sheet, whereas [//www.w3.org/TR/css-style-attr/#syntax the style= attribute] may only contain a semicolon-separated list of declarations. This is a fundamental concept of the CSS syntax, it is nothing that we can change.


:To bullet 2: this is not necessarily true - when it comes to editing CSS pages, admins are subject to the same restrictions as non-admins, that is, they may not edit those in the MediaWiki: namespace nor those in User: space, except for those which are subpages of their own user page.


:To bullet 3: this is demonstrably untrue.


:To bullet 4: that's the way it goes. --Redrose64 🌹 (talk) 19:26, 30 May 2021 (UTC)
Does "wp" in the ID names stand for "Wikipedia" or something else with the same abbreviation?
Since it is for MediaWiki in general, does it have a different meaning that happens to be abbreviated with "wp", or is it "Wikipedia" (since MediaWiki was originally developed around Wikipedia)? Wiisixtyfour (talk) 15:48, 10 April 2022 (UTC)
image-rendering: pixelated; CSS class
I would like to add a image-rendering: pixelated; CSS property to an image file. I can do this with Wikipedia:Extended image syntax#Class if there was a class that applied this setting.


The reason for this setting is PNG files that are very small are upsampled by blurring pixels together, but there are a number of images where each pixel is supposed to be a perfect square, like the one on Viroid. This setting tells the browser to turn off the blurring. Akeosnhaoe (talk) 07:12, 1 February 2024 (UTC)