Wikipedia talk:Catalogue of CSS classes

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)[reply]

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)[reply]

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)[reply]

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)[reply]

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:				  '<span class="redirectText">'.$link.'</span>' );
/Users/jesse/FreeProjects/phase3/includes/ChangesList.php:474:		$users = ' <span class="changedby">['.implode('; ',$users).']</span>';
/Users/jesse/FreeProjects/phase3/includes/DifferenceEngine.php:262:		$header = "<div class=\"firstrevisionheader\" style=\"text-align: center\"><strong>{$this->mOldtitle}</strong><br />$userLink " .
/Users/jesse/FreeProjects/phase3/includes/EditPage.php:908:<div class='editButtons'>
/Users/jesse/FreeProjects/phase3/includes/EditPage.php:1079:			"<div class='previewnote'>" . $wgOut->parse( wfMsg( $msg ) ) . "</div>\n";
/Users/jesse/FreeProjects/phase3/includes/ImageGallery.php:95:		$s = '<table class="gallery" cellspacing="0" cellpadding="0">';
/Users/jesse/FreeProjects/phase3/includes/ImageGallery.php:106:				$s .= '<td><div class="gallerybox" style="height: 152px;">' .
/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( '<div class="fullImageLink" id="file">' . $anchoropen .
/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:260:<div class="fullMedia">
/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:261:<span class="dangerousLink">[[Media:$filename|$filename]]</span>
/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:262:<span class="fileInfo"> ($info)</span>
/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:265:<div class="mediaWarning">$warning</div>
/Users/jesse/FreeProjects/phase3/includes/ImagePage.php:295:		$sharedtext = "<div class='sharedUploadNotice'>" . wfMsgWikiHtml("sharedupload");
/Users/jesse/FreeProjects/phase3/includes/Linker.php:460:			$s = '<a href="'.$u.'" class="image" title="'.$alt.'">' .
/Users/jesse/FreeProjects/phase3/includes/Linker.php:549:				$zoomicon =  '<div class="magnify" style="float:'.$magnifyalign.'">'.
/Users/jesse/FreeProjects/phase3/includes/Linker.php:555:		$s .= '  <div class="thumbcaption" '.$textalign.'>'.$zoomicon.$label."</div></div></div>";
/Users/jesse/FreeProjects/phase3/includes/Linker.php:700:			$auto='<span class="autocomment">'.$auto.'</span>';
/Users/jesse/FreeProjects/phase3/includes/Linker.php:756:				return " <span class='comment'>(...)</span>";
/Users/jesse/FreeProjects/phase3/includes/Linker.php:778:		return "\n<li class='toclevel-$level'><a href=\"#" .
/Users/jesse/FreeProjects/phase3/includes/Math.php:231:			return '<span class="texhtml">'.$this->html.'</span>';
/Users/jesse/FreeProjects/phase3/includes/Math.php:241:		return "<img class='tex' src=\"$url\" alt=\"$alt\" />";
/Users/jesse/FreeProjects/phase3/includes/PageHistory.php:248:			$s .= '<span class="history-deleted">';
/Users/jesse/FreeProjects/phase3/includes/PageHistory.php:255:		$s .= "($curlink) ($lastlink) $arbitrary $link <span class='history-user'>$ul</span>";
/Users/jesse/FreeProjects/phase3/includes/PageHistory.php:263:			$s .= ' <span class="updatedmarker">' .  wfMsgHtml( 'updatedmarker' ) . '</span>';

"p-interact"/"p-interaction"

I'm the author of a wikipedia userstyle for the FF stylish extension (local CSS altering) and I was wondering about the new "p-interact"/"p-interaction" menu. It's implementation seems very random - sometimes it's there, sometimes it's not. Can anyone tell me if it's here to stay or? (I don't want to make any alterations to my userstyle if it's just being tried on for size) Thought this might be a good place to ask - apologies if it's not.... chochem 08:51, 20 December 2006 (UTC)

It is a good place to ask, except that I don't expect many people to see your question. The best place for that question would be Wikipedia:Village pump (technical). --cesarb 15:49, 23 December 2006 (UTC)[reply]

Ok, thanks. (Update: I took a random-article-tour of some 30 articles without seeing it once, so I don't think I'll pursue it any further.) chochem 15:59, 28 December 2006 (UTC)

New Part of the Table?

I think there should be an example section, to allow users to see what a small one would look like - like a visual reference. Any thoughts? If no one disagrees I could try doing one, however this would probably be a bad idea since I uhh, well, don't really get how to (I can do easy ones, but these seem more complex), but again, any thoughts?--Daniel()Folsom ^T|_C|^U 17:06, 15 January 2007 (UTC)[reply]

It's better to have the examples on the pages where the classes are documented or used (the whole point of this page is to link to where each CSS class/id is documented, defined, and used). Adding examples here would lose the focus of this page. Also, they often aren't supposed to be used directly; they are either part of the interface (automatically used by MediaWiki), or used only on specific templates (for instance, the spoiler ones, which do have their own examples). --cesarb 22:08, 17 January 2007 (UTC)[reply]

Go and Search buttons in Chick skin

Please excuse the cross posting -- not sure where this belongs.

The Go and Search buttons on the Chick skin spill over into the edit box (in which I am currently typing).

Could they be moved beneath the Search box (directly above the Toolbox label).

Robert Greer (talk) 14:01, 11 December 2007 (UTC)[reply]

Modern skin

Hi, I've got a question at Wikipedia:Village pump (technical)#Modern skin that someone here might have more info on. I'd also like to bump/remind anyone that knows what to do, to update this page to include info on the new modern skin. Thanks :) -- Quiddity (talk) 21:03, 28 January 2008 (UTC)[reply]

Locating a class

How does one find a class used by a template, ie class="cquote" line 4 here: http://en.wikipedia.org/w/index.php?title=Template:Cquote&action=edit? It's not found in any of the stylesheets referenced in http://meta.wikimedia.org/wiki/Help:Cascading_style_sheets. --Jheckmann (talk) 15:10, 18 August 2008 (UTC)[reply]

I searched all the style sheets that my web browser loads when I load a Wikipedia page. The class "cquote" is not used in any of them. Thus the class is not yet defined anywhere.

(I use Firefox and there is an "add-on" for it called "JSView" that can show all the style sheets and javascript pages for a page you are looking at. You can download that add-on from the official Firefox site. Similar functions or plug-ins exist for most other browsers too.)

As you can see the "cquote" class has the same name as the template it is used in. We often mark templates in that way in case someone in the future wants to style the template in their own monobook.css or in one of the official Wikipedia skins. You can still skin the template even if it uses hardcoded styles like in this case. Simply use the "!important" keyword in your style sheet to override the 'style=""' styles. Like this:

.cquote {
    background-color: #eee !important;
}

--David Göthberg (talk) 06:09, 19 August 2008 (UTC)[reply]

Microformat classes

I have added a page on classes used in microformats (see also microformat; Wikipedia:WikiProject_Microformats). It has been suggested that these should be added to the master CSS document, unstyled, to ensure that they are found when people look for them, and that they are not reused of other purposes. How can I go about requesting this? Andy Mabbett | Talk to Andy Mabbett 21:07, 22 August 2008 (UTC)[reply]

That you added information about those classes here at Wikipedia:Catalogue of CSS classes is a good start if you want to "reserve" those class names.

The master CSS document is MediaWiki:Common.css. (Well, there are style sheets loaded before that, but those can only be edited by the developers, while MediaWiki:Common.css can be edited by admins.)

And the best place to discuss these things is usually at MediaWiki talk:Common.css, since much more people watch that talk page than this talk page. If you repeat your question there I will answer you there, since I do have comments regarding this.

--David Göthberg (talk) 08:29, 23 August 2008 (UTC)[reply]

Thank you; done. Andy Mabbett | Talk to Andy Mabbett 09:01, 23 August 2008 (UTC)[reply]

Even/odd classes

These classes were automatically added to all rows of sortable tables by JavaScript. These classes were useless because no sitewide CSS rules were defined for them. Since April 2008 these classes are not even added anymore on English Wikipedia. I ask user:Ms2ger to support this revert with some real arguments instead of just saying "still there" which doesn't make any sense to me. —AlexSm 22:08, 28 August 2008 (UTC)[reply]

ts_resortTable() calls ts_alternate(), whatever the value of ts_alternate_row_colors is. That means that the even/odd classes are added as soon as you hit one of the sort buttons. I also wonder where the consensus for that edit is to be found, as I don't find it in the talk archives. —Ms2ger (talk) 09:14, 29 August 2008 (UTC)[reply]

Okay, my bad, indeed they are added after click. Still, in the current state they're hardly useful. May I ask why you want them to stay in the code? Do you plan to remove ts_alternate_row_colors from Common.js and add something like table.alternate .even {background-color:...} to Common.css? P.S. If the goal of this page is to collect all possible classes, might as well add sortheader and sortarrow. —AlexSm 14:59, 29 August 2008 (UTC)[reply]

Sorry for the slow reaction, I've been quite busy lately.

They might not be that useful, but that's true for more classes than only those. Removing that code from Common.js might be better, but it isn't a priority for me, and styling those classes globally even less.

This page does indeed state that "[t]his page is an attempt to catalogue and describe all the classes and IDs used on this wiki". Thanks for noting sortheader and sortarrow, I'll add them. —Ms2ger (talk) 20:25, 13 September 2008 (UTC)[reply]

Update: in the current version of wikibits.js variable ts_alternate_row_colors is false by default (admin might want to remove it from the local Common.js now), and it is checked before each call of ts_alternate(). This means that "even"/"odd" classes will never appear in the HTML anymore, and you can get them only by setting a variable in personal monobook.js, which makes then on the level with any classes added by personal userscripts. Can we remove these classes now? —AlexSm 20:53, 14 September 2008 (UTC)[reply]

And what happens when a user, such as me, browses with Javascript disabled? Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 20:17, 16 September 2008 (UTC)[reply]

Good news: nothing has changed for you. Just as before, you will not see these CSS classes on Wikipedia pages, since they were always generated by JavaScript. —AlexSm 03:07, 17 September 2008 (UTC)[reply]

Thanks for the clarification> Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 12:09, 17 September 2008 (UTC)[reply]

Done Thanks for the update. —Ms2ger (talk) 14:19, 17 September 2008 (UTC)[reply]

Should selflink be listed?

Ths selflink class is used for self referencing wikilinks such as this one. Should it be listed here? -- Tcncv (talk) 06:42, 10 May 2009 (UTC)[reply]

~~Is it used in any stylesheets? I believe that's the current threshold of inclusion here.~~ Never mind, it's auto-inserted by MediaWiki anyways. 「ダイノガイ千？！」^{(Dinoguy1000)} 07:31, 12 May 2009 (UTC)[reply]

Done *passes out* 「ダイノガイ千？！」^{(Dinoguy1000)} 07:38, 12 May 2009 (UTC)[reply]

Discussion on actual CSS files?

Is there a discussion page for the actual CSS files? There is a long standing problem (at least here) on IE6/9x with an easy fix which I'd like to discuss. ¤ ehudshapira 19:57, 26 August 2009 (UTC)[reply]

Best place for that is MediaWiki:Common.css —TheDJ (talk • contribs) 21:30, 26 August 2009 (UTC)[reply]

There's also the technical Village Pump for a wider audience or more general/"upstream" issues. 「ダイノガイ千？！」^{? · Talk⇒Dinoguy1000} 16:23, 27 August 2009 (UTC)[reply]

Bunch of newbie questions

I tried to read this page but it made my head spin, and I couldn't even figure out if I was reading the right page much less find the answer to my question. I came across some script in an article that caught my fancy, and I've been experimenting with it without knowing exactly what I'm doing. The script makes this green box here: http://en.wikipedia.org/wiki/User:Noloop#experiments

1. What is "class=toccontents" and is it OK to just copy it from article to article? 2. Is there anything I can really screw up by copying this into various articles, subbing my content into the template where I please? 3. Why does the Quran citation work? It contains no wikilinks or url to the Web site it links to. I don't understand what's going on (but I like it).

Thanks! Noloop (talk) 05:07, 25 June 2010 (UTC)[reply]

Quran citation is produced by {{Cite_quran}} template. The construct class="tocolours" that you are trying to use is not a script, but a CSS style definition. It stipulates that the class 'tocolours' will be used to set the style (padding, background colour, font size) of a particular HTML element. The class itself is defined in MediaWiki:Monobook.css. You probably should not use it as it is defined only for the monobook skin. If you want to learn more about CSS you need to read the article about it. Ruslik_Zero 15:05, 25 June 2010 (UTC)[reply]

Hi, thanks for the reply. I copied the script from a featured article (Jack Sparrow), so shouldn't it be somewhat universal? I'm only vaguely familiar with the "skin" concept and how it works. I didn't realize the Quran had its own template. Interesting..... Noloop (talk) 16:27, 25 June 2010 (UTC)[reply]

It seems to work OK if I just remove the "class=xyz" part. So the first line looks like this:

{| style="float: right; margin-left: 1em; margin-right: 2em; font-size: 85%; background:#bbffbb; color:black; width:30em; max-width: 40%;" cellspacing="5"

Is it good form to put that code in an article? Noloop (talk) 16:45, 25 June 2010 (UTC)[reply]

Yes, it is good. Ruslik_Zero 17:56, 25 June 2010 (UTC)[reply]

Template:Query web archive

None of the classes used in {{Query web archive}} are in MediaWiki:Common.css (et al.), but I thought to let you know anyway in case it does happen. – Allen4names 20:17, 21 February 2011 (UTC)[reply]

Horizontal lists

We're looking at CSS for horizontal lists (chiefly but not only in navboxes), and have some working code. Please join the centralised discussion at MoS (accessibility). Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 11:41, 2 April 2011 (UTC)[reply]

Class `reference plainlinks nourlexpansion`?

I was trying to figure out how the {{ref}} template worked, when I saw that it uses an html tag with the class reference plainlinks nourlexpansion. How is this class defined? I googled it but I didn't find anything about it; I also didn't find anything about it in this article. I ned to know how the class is defined in order to know how the {{ref}} template works. —Kri (talk) 15:23, 2 June 2012 (UTC)[reply]

These are three different classes and may be defined at different places. They don't actually 'do' anything template wise; they only influence the styling of the refererence links. The .reference class prevents bolding in tables, the .plainlinks class removes the external link icon, and the .nourlexpansion class hides the link when printed. They are all listed on this page. — Edokter (talk) — 20:43, 2 June 2012 (UTC)[reply]

Suggested move

The following discussion is an archived discussion of the proposal. Please do not modify it. Subsequent comments should be made in a new section on the talk page. No further edits should be made to this section.

The result of the proposal was no consensus. --BDD (talk) 17:07, 11 March 2013 (UTC) (non-admin closure)[reply]

Wikipedia:Catalogue of CSS classes → Wikipedia:Catalogue of classes used in CSS – The page is badly named. there are no such thing as "CSS classes" [1]. I've moved it once, but was reverted on the spurious grounds that there were "too many double redirects". That's not a valid reason to keep a bad page name; and most incoming links are from a handful of templates. relisted --Mike Cline (talk) 22:20, 1 March 2013 (UTC) Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 20:46, 16 February 2013 (UTC)[reply]

Survey

Feel free to state your position on the renaming proposal by beginning a new line in this section with *'''Support''' or *'''Oppose''', then sign your comment with ~~~~. Since polling is not a substitute for discussion, please explain your reasons, taking into account Wikipedia's policy on article titles.

Oppose ofcourse there are things called CSS classes, they are discrete packages of CSS. As for this page, it doesn't seem to be a catalogue of classes... so perhaps it should be called WP:Catalogue of CSS -- 65.92.180.137 (talk) 02:50, 17 February 2013 (UTC)[reply]

Oppose. No good argument has been raised to move as proposed. There are now three proposed titles, the existing Catalogue of CSS classes, this proposal Catalogue of classes used in CSS, and the counter proposal Catalogue of CSS. I'm inclined to the counter proposal as simplest, and the current one as second simplest, and against the proposal as awkward and unnatural, but all we seem to have so far is personal preferences. So my suggestion is, leave it as is for now, which is probably what the too many redirects argument was getting at too, they just didn't spell it out. Andrewa (talk) 18:39, 9 March 2013 (UTC)[reply]

Discussion

Any additional comments:

Even according to the web page cited, the current name is commonly used. Agree however that the existence of redirects is not a good argument. Andrewa (talk) 14:05, 24 February 2013 (UTC)[reply]

The above discussion is preserved as an archive of the proposal. Please do not modify it. Subsequent comments should be made in a new section on this talk page. No further edits should be made to this section.

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)[reply]

2015 Update: Styling it italic by default would be the 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 <cite>...</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)[reply]

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)[reply]

Boldly adding, now. –Quiddity (talk) 20:36, 15 April 2014 (UTC)[reply]

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)[reply]

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)[reply]

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 "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)[reply]

@Pigsonthewing: See #Suggested move three threads above this one. --Redrose64 (talk) 15:53, 17 May 2014 (UTC)[reply]

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)[reply]

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)[reply]

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)[reply]

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

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)[reply]

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)[reply]

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)[reply]

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

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)[reply]

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)[reply]

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)[reply]

references-small

Where is references-small defined? It is no longer in MediaWiki:Common.css. -- Gadget850^talk 12:02, 28 April 2015 (UTC)[reply]

Since <references /> and {{reflist}} now have the same font size (instead of <references /> 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)[reply]

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)[reply]

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)[reply]

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

Found the change where it was removed on 10 Dec 2010.[2] Still about 8,000 uses. 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)[reply]

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

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 <sup>, which is smaller still, but even {{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)[reply]

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 [3], 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 <ul><li>...</li></ul> bullet is being styled, or whatever. — SMcCandlish ☺ ☏ ¢ ≽^ʌⱷ҅_ᴥⱷ^ʌ≼ 01:50, 25 August 2015 (UTC)[reply]

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 [4]. Individually searching for, e.g., "common/shared.css" allows one to narrow down to a smaller number of discussions [5], 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)[reply]

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)[reply]

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)[reply]

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

To locate all the CSS pages in a namespace, use the search parameter intitle. For example wp:intitle: css and MediaWiki: intitle: css. To AND terms, use two intitle. Intitle won't OR. — Cpiral Cpiral 20:56, 17 December 2015 (UTC)[reply]

An introduction

Repo's

The primary Git repo's are HOSTED on gerrit.wikimedia.org
gerrit.wikimedia also hosts our code review
git.wikimedia.org hosts a web interface for browsing the repo, but it is slowly being deprecated
Phabricator hosts mirror's of our repo's code and the NEW web browsing interface for it.
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.
Each skin and extension is in it's own repository.
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.
Similarly rMEXT aka extensions aka /extensions is a repository with pointers to the various extensions.

The code

Basically any CSS file as mentioned on the page no longer exists.
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).
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.
CSS can be for either print or screen media and these are often separate.
CSS can be marked as compatible for either mobile or desktop.

The structure

/skins
- /skins/individual skins (except for mobile)
- /skins/Vector
- /skins/Monobook
- Skins have CSS that mostly deals with the looks of the
/resources
- /resources/Resources.php - defines all core ResourceLoader modules. The above mentioned targets, skinStyles, and media markers and dependencies are set here.
- /resources/lib - All third party libraries that we use but do not 'own'. jQuery is here for instance.
- /resources/src - All code that is mediawiki specific or not a separate library
/extensions

6 years later

The page is still full of dead links.

Help:Table#Classes
Help:Cascading_Style_Sheets
phabricator.wikimedia.org/.../shared.css this one works (today at least)

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)[reply]

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)[reply]

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

Welcome to CSS. – The Grid (talk) 20:06, 23 July 2022 (UTC)[reply]

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)[reply]

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

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)[reply]

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)[reply]

I did use the word "technically". A slight reword might be preferable. --Izno (talk) 20:53, 21 August 2020 (UTC)[reply]

"Catalogue of IDs" listed at Redirects for discussion

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)[reply]

@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)[reply]

To bullet 1: the @keyframes at-rule can only go in a style sheet, whereas 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)[reply]

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)[reply]

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)[reply]