User:Sky6t/sandbox

From Wikipedia, the free encyclopedia

I am very sad to see this all...

This paragraph IE10 spelling correction is based on the latest Microsoft spellchecking engine and dictionaries. IE10's spell checker also includes auto-correction to help correct mistakes while you type! acceptable* committed discipline*

check my spelling as I type.

Text-align and position[edit]

 My position is absoluteMy text-align is center

Now it seems to work fine to make this absolutely positioned element center.

Pre test[edit]

 __________     __________       ____________             _________      ______     ______    ________
|_    ___  \   |_    ___  \     |_    _____  |           /  _____  \    |_    _|   |_    _|  |__    __|
  |  |   \  \    |  |   \  \      |  |     |_|          /  /     \  \     |  |       |  |       |  |
  |  |___/  /    |  |___/  /      |  |______           /  /       |__|    |  |       |  |       |  |
  |  ______/     |   _   _/       |   ______|         /  /      _______   |  |       |  |       |  |
  |  |           |  | \  \        |  |                \  \     |__   __|  |  |       |  |       |  |
  |  |           |  |  \  \       |  |      _          \  \       |  |    |  |       |  |       |  |
 _|  |__        _|  |_  \  \__   _|  |_____| |          \  \_____/  /      \  \_____/  /      __|  |__
|_______|      |______|  \____| |____________|           \_________/        \_________/      |________|

border-radius and dotted borders[edit]

Internet Explorer would display it right, but Firefox and Google Chrome would treat it as if it were border-style: solid.

This has been fixed.

Some[edit]

G

Moon[edit]

Font-feature-settings test[edit]

Efficient font-feature-settings, 0123456789.

Efficient font-feature-settings, 0123456789.

Efficiently on the fifth floor, 0123456789.

Background-attachment: fixed and transform[edit]

Paragraph

Paragraph

Paragraph

Signature[edit]

Sky6t 14:33, 22 April 2014 (UTC)

Ampersand[edit]

& & & & & & & & &

Tables[edit]

Text inside
Text inside

The two tables look different in IE11.

Code[edit]

<table style="box-shadow:0 0 0 1px #ccc;border-collapse:collapse">
<tr><td style="padding:.3em .5em">Text inside</td></tr>
</table>

<table style="box-shadow:0 0 0 1px #ccc;border-spacing:0">
<tr><td style="padding:.3em .5em">Text inside</td></tr>
</table>

letter spacing[edit]

Quick brown foxes jump over the lazy dog. Illustrating the indifferent.

Run-in[edit]

Run-in

Supported has been dropped for display: run-in.

Relative and top[edit]

I am here

Flex[edit]

I am the inner element.

Inline-block and overflow: hidden[edit]

Quick brown fox

Safari will mistakenly align them.

More inline-block[edit]

Quick
 
Quick
Brown
Quick

Float and width[edit]

aQuick

UL[edit]

  • Quick
  • Brown

Stacking[edit]

Text

One: absolute
Two: floated
Three: static

Text

One: absolute
Two: floated with opacity
Three: static transformed

Text

One: absolute
Two: floated with opacity
Three: relative
One: absolute with z-index: -1

Text

The model[edit]

Here we propose a better model concerning the stacking order, with how stacking contexts influence stacking behavior taken into consideration (modified from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float):

  1. Static, non stacking context-forming, non-floated elements;
  2. floating elements, text and inline elements in static elements;
  3. positioned elements and stacking context-forming elements (including elements with z-index set to 0);

The order within each item is in the order of appearance in the DOM.

float[edit]

Hello world

Margin collapsing[edit]

The quick brown fox
jumps
over the lazy dog.

The quick brown fox jumps over the lazy dog.

CSS parabola[edit]

Hyperbola[edit]

Overflow: hidden[edit]

flex-grow: 1

some text