Blob constructing
[Table][Single feat]Auto
"BlobBuilder" in window
Auto
new Blob(["hey!<\/b><\/a>"], { "type" : "text\/xml" });
Auto
"BlobBuilder" in window
Canvas (basic support)
[Table][Single feat]Auto(m)
Modernizr test for: "canvas"
Visual-square
Draw rect on canvas using fillStyle and fillRect
Text API for Canvas
[Table][Single feat]Auto(m)
Modernizr test for: "canvastext"
WebGL - 3D Canvas graphics
[Table][Single feat]Auto(m)
Modernizr test for: "webgl"
Visual-square
CSS position:fixed
[Table][Single feat]Auto
Interact
Test here
CSS Masks
[Table][Single feat]Visual
mask-image: url(alpha.png);
Visual
mask-image: url(alpha.png);
CSS Grid Layout
[Table][Single feat]Visual-square
Grid with two columns, two rows and three elements taking up space.
Visual-square
Grid with two columns, two rows and three elements taking up space.
Scoped CSS
[Table][Single feat]Visual-square
If the scoped attribute is ignored, the box will get a red background.
CSS Generated content
[Table][Single feat]Visual
-
Element with CSS:
#gencontent:before {
content: 'A';
}
#gencontent:after {
content: 'Z';
}
CSS Table display
[Table][Single feat]Visual
topleft
topright
bottomleft
bottomright
Should be 2x2 table
CSS Counters
[Table][Single feat]Visual-square
Generated counter content should fill block with lime color.
CSS 2.1 selectors
[Table][Single feat]Visual-square
Test for child ( > )selector
Visual-square
Adjacent sibling selector test ( + )
Visual-square
Attribute selector ( [role="none"] )
CSS inline-block
[Table][Single feat]Visual-square
CSS min/max-width/height
[Table][Single feat]Visual-square
Visual-square
Visual-square
Visual-square
CSS outline
[Table][Single feat]Visual-square
Element with 0 width/height and 30px lime outline.
CSS3 Background-image options
[Table][Single feat]Auto(m)
Modernizr test for: "backgroundsize"
Visual-square
background-clip: content-box;
Visual-square
background-origin: content-box;
Visual-square
background-size: 30px 30px;
Visual-square
background-clip: content-box;
Visual-square
background-origin: content-box;
Visual-square
background-size: 30px 30px;
CSS3 Border images
[Table][Single feat]Auto(m)
Modernizr test for: "borderimage"
Visual-square
Separate properties:
border-image-source: url(green5x5.png);
border-image-slice: 2;
Visual-square
Shorthand syntax: border-image: url(green5x5.png) 2;
Visual-square
Separate properties:
border-image-source: url(green5x5.png);
border-image-slice: 2;
Visual-square
Shorthand syntax: border-image: url(green5x5.png) 2;
CSS3 Border-radius (rounded corners)
[Table][Single feat]Auto(m)
Modernizr test for: "borderradius"
Visual-square
Visual-square
CSS3 Animation
[Table][Single feat]Auto(m)
Modernizr test for: "cssanimations"
Visual-square
animation: staylime 60s infinite;
@keyframes staylime {
from { background-color: lime; }
to { background-color: lime; }
}
Visual-square
animation: staylime 60s infinite;
@keyframes staylime {
from { background-color: lime; }
to { background-color: lime; }
}
CSS3 Box-shadow
[Table][Single feat]Auto(m)
Modernizr test for: "boxshadow"
Visual-square
Test for support for basic support
Visual-square
Test for support for radius value
Visual-square
Test for support for multiple shadows
Visual-square
Test for support for "inset" shadow
Visual-square
Test for support for multiple inset shadows with radius
Visual-square
Test for support for basic support
Visual-square
Test for support for radius value
Visual-square
Test for support for multiple shadows
Visual-square
Test for support for "inset" shadow
Visual-square
Test for support for multiple inset shadows with radius
CSS Gradients
[Table][Single feat]Auto(m)
Modernizr test for: "cssgradients"
Visual-square
linear-gradient(to right, lime, lime, red);
Visual-square
radial-gradient(lime, lime)
Visual-square
linear-gradient(lime, lime)
Visual-square
linear-gradient(to right, lime, lime, red);
Visual-square
radial-gradient(lime, lime)
Visual-square
linear-gradient(lime, lime)
CSS3 Opacity
[Table][Single feat]Auto(m)
Modernizr test for: "opacity"
Visual-square
Test for opacity: 0
Visual-square
Test for opacity: 0
CSS3 Text-shadow
[Table][Single feat]Auto(m)
Modernizr test for: "textshadow"
Visual
px;
color: white;
text-shadow: 25px 0 3px lime; position: relative;
left: -25px;
Visual
Multiple shadow test
Visual-square
Multiple shadows with radius value
Visual
px;
color: white;
text-shadow: 25px 0 3px lime; position: relative;
left: -25px;
Visual
Multiple shadow test
Visual-square
Multiple shadows with radius value
CSS3 Transitions
[Table][Single feat]Auto(m)
Modernizr test for: "csstransitions"
Interact
Green square must (briefly) appear on hover
5 second transition from left to right using cubic-bezier(0, 1, 1, 0);
Interact
Green square must (briefly) appear on hover
5 second transition from left to right using cubic-bezier(0, 1, 1, 0);
CSS3 Colors
[Table][Single feat]Auto(m)
Modernizr test for: "hsla"
Visual-square
Visual-square
Flexible Box Layout Module
[Table][Single feat]Auto(m)
Modernizr test for: "flexbox"
Visual-square
Test for display: box; (old syntax)
Visual-square
Test for display: flexbox; (2009 syntax)
Visual-square
Test for display: flex; (current syntax)
Visual-square
Test for display: box; (old syntax)
Visual-square
Test for display: flexbox; (2009 syntax)
Visual-square
Test for display: flex; (current syntax)
@font-face Web fonts
[Table][Single feat]Auto(m)
Modernizr test for: "fontface"