Fandom

Community Central

Help:Wikitext/CSS/Availability test

English

Help:Wikitext/CSS/Availability test

< Help:Wikitext | CSS

19,805pages on
this wiki
Add New Page
Talk0 Share

This side page have a few purpose who are separated into section. Could help wikia contributor to test which code work, or not, on community central; and by extension, on others communities.

Since this page upkeep represent a huge amount of time, please, as a reader, help by adding example following the style of the first section.

Note as a choice, HTML or Css who work only for 1 or 2 browser might not be listed there. Use the talk page if required.

Deprecated HTML tagsEdit

Wikia, wikipedia have the possibility to disable and create tags. So there is a few old tags who might still work.

See Help:Magic words
See Help:Galleries, Slideshows, and Sliders/wikitext
Tags Examples
acronym Can I get this ASAP?

Can I get this acronym title="as soon as possible">ASAP /acronym>?

applet
basefont For a document <head> section only
big Bigger text

big>Bigger text /big>

center
centered text

center>centered text/center>

dir
font This is some text!

font size="3" color="red">This is some text! /font>

frame, frameset, noframes <frameset cols="25%,50%,25%" frameborder="1">
 <frame >
 <frame >
 <frame >

</frameset>

strike stroked text

strike>stroked text /strike>

tt teletype markup as font who have different meaning

tt>teletype markup as font /tt>


HTML5 tagsEdit

See also : Help:HTML to learn which tag is permitted

Tags examples
Styles and semantics
header footer
main section
article
details summary

<article> <footer>

Hello there!

</footer> <details> <summary>

as summary

</summary>

See also

</details> </article> <footer>

the final word

</footer>


section> p>Hello</p> /section> article> footer> p>Hello there!</p> /footer> details> summary> p>as summary</p> /summary> p>See also</p> /details> /article> footer> p>the final word</p>

/footer>
nav <nav>Help:WikitextHelp:Wikitext/CSS</nav>

nav>Help:Wikitext]] Help:Wikitext/CSS]]/nav>

embed
audio, video, source, track, nav
picture, figure, figcaption, canvas
datalist, keygen, output
Formating
bdi mark
meter progress
rp, rt ruby
time wbr


Unavailable cssEdit

See also : Help:Cascading_style_sheets on meta.wikimedia

with Internet ExplorerEdit

  • box-decoration-break
  • object-fit
  • outline-offset
  • resize
  • tab-size
  • background-blend-mode property

with FirefoxEdit

  • column-span
  • overflow-y

with ChromeEdit

  • @page
  • background-position-x, background-position-y with multiple background-image in a single declaration

with Safari / OperaEdit

  • text-align-last
  • font-feature-settings
  • hyphens
  • text-combine-upright

CSS4 by modules Edit

Search theses documents on the web for more information.

  • Media queries level 4
  • css color module level 4
  • css pseudo elements module level 4
  • css cascading and inheritance level 4
  • Css text module level 4
  • css basic user interface module level 4
  • selectors level 4
  • css image values and replaced content module level 4


CSS Backgrounds and Borders Module Level 3Edit

3.3 Background-image
Note : To insert a background-image, inline, use a class from inside your MediaWiki:Common.css, MediaWiki:Wikia.css
IE8 and earlier version do not support multiple background images on one element.
For the next example,
class="basic"
have been used, because this one insert a background-image : [1]communitytest.wikia.com
3.4 Background-repeat
background-repeat round
3.5 Background-attachement
background-attachement fixed
3.6 Background position
background-position 75% 50%
3.7 Background-clip
background-clip content box
3.8 Background origin
Note that background-origin require multiple background-image in a single declaration
3.9 Background size
Note w3school suggest to use the -webkit-, -moz-, -o- with background-size
background-size: 50% auto;
5.1 Border radius
Note w3school suggest to use the -webkit-, -moz-, with border-radius
Border radius shorthand...

...start from top left, top right, bottom right, bottom left, and could manage empty value.

5.2 Corner shaping
Effect when 2 corner have a border with differents thickness, and when the radius is smaller than the border width.
radius with different thickness
5.3 Corner clipping
Element background clip, follow the curve of its element. There is a white background who follow the curve of its element border radius.
radius with bigger border
5.4 Color and style transition
As on last example, depend on the border thickness.
5.5 Overlapping curves

When the sum of every radius is higher than height or width from one element, this will not create an overlap. Instead, radius is reduced until fully contained.

80 by 20 px square with 15px radius.

5.6 Effect on tables
H
11 12
21 22


See also Edit


Further help and feedbackEdit