sammihansen
1/6/2019 - 11:28 PM
New CSS Features for 2019
New CSS Features for 2019
<nav class="nav">
<a href="#" class="logo"><span>PXL</span> <span>Kllr</span></a>
</nav>
<div class="hero">
<div>
<h1>New CSS Features for 2019</h1>
<p>A responsive, highly flexible, lightweight, pixel-free, mostly automated website UI demo. Based on <a href="https://www.creativebloq.com/features/10-amazing-new-css-techniques">this recent article</a> by <a href="https://rachelandrew.co.uk">Rachel Andrew</a> with a few additions & modifications. Inspired by the <a href="https://css-tricks.com">new CSS Tricks redesign</a>.</p>
<p> About 5kb. < 200 lines of CSS. Looks terrible in most browsers right now, open three.</p>
</div>
<div>
<ol>
<li><a href="#one">Gutters for Flexbox</a></li>
<li><a href="#two">Logical Properties & Values</a></li>
<li><a href="#three">Grid level 2 & Subgrid</a></li>
<li><a href="#four">Initial Letter (drop cap)</a></li>
<li><a href="#five">Variable Fonts</a></li>
<li><a href="#six">Scroll Snapping</a></li>
<li><a href="#seven">Detect Pointer Type</a></li>
<li><a href="#eight">Syntax Improvements for Media Queries</a></li>
<li><a href="#nine">Feature Query</a></li>
<li><a href="#ten">Gradient Background, Borders & Text</a></li>
<li><a href="#eleven">Variables for Customization</a></li>
<li><a href="#twelve">Pixel-Free - VH/ VW Spacing</a></li>
<li><a href="#thirteen">Bugly (beautiful-ugly) Scrollbar</a></li>
</ol>
</div>
</div>
<section id="one">
<h3>1. Flexbox Grid Gap - Gutters for Flexbox</h3>
<p>Gap is now renamed column-gap, row-gap & works with Flexbox. It's no longer necessary to use an entire grid framework for creating grid elements or layouts.</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_flexbox" class="btn">Moz</a>
</section>
<section id="two">
<h3>2. Logical Properties & Values</h3>
<p>Size elements or refer to their margins, padding & borders even with writing direction changes.
Block = vertical in horizontal text (standard English) & horizontal in vertical text (Chinese).
Inline = horizontal in horizontal text (standard English) & vertical in vertical text (Chinese).</p>
<a href="https://www.w3.org/TR/css-logical-1/" class="btn">W3C</a>
</section>
<section id="three">
<h3>3. Grid Level 2 & Subgrid</h3>
<p>Subgrids for nested grids can participate in the sizing of their parent grids & aspect-ratio–controlled gutters.
The children of a grid container can be placed into arbitrary slots in a fixed-size layout or a predefined flexible grid.
</p>
<a href="https://www.w3.org/TR/css-grid-2/" class="btn">W3C</a>
</section>
<section id="four">
<h3>4. Initial Letter</h3>
<p>Design-only, to set styling for dropped, raised or sunken initial letters. Suitable for Drop Caps, Raised Caps & Block Caps.
Choose number of lines & columns to wrap. Works with text gradient.</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter" class="btn">Moz</a>
</section>
<section id="five">
<h3>5. Variable Fonts</h3>
<p>Variable fonts enable many variations of a typeface to be incorporated into a single file & @font-face reference. This file can be manipulated via CSS allowing for fine control over text & typographical elements.</p>
<a href="https://www.w3.org/TR/css-fonts-4/" class="btn">W3C</a>
<a href="https://v-fonts.com" class="btn">V Fonts</a>
</section>
<section id="six">
<h3>6. Scroll Snapping</h3>
<p>CSS Scroll Snapping helps create controlled scroll experiences by declaring snapping positions. This means that you can make interfaces that snap or lock to scroll points. This is done by defining a parent/ container element & children inside the container.</p>
<a href="https://www.w3.org/TR/css-scroll-snap-1/" class="btn">W3C</a>
</section>
<section id="seven">
<h3>7. Pointer Detection Type</h3>
<p>Detect pointer type lets us check for the presence & accuracy of a pointing device (mouse). Once detected, UI design can account for it (example: larger checkboxes for less accurate pointer devices). If multiple pointing devices are detected, the pointer feature will use the primary pointing device (determined by the user).</p>
<a href="https://www.w3.org/TR/mediaqueries-4/#pointer" class="btn">W3C</a>
</section>
<section id="eight">
<h3>8. Syntax Improvements for Media Queries</h3>
<p>The new syntax is simpler than before to achieve the same thing. The old or new syntax can be used in future. New syntax > old syntax.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4" class="btn">Moz</a>
</section>
<section id="nine">
<h3>9. Feature Query</h3>
<p> Test if your browser supports specific features with Feature Query. Used in the same way as Media Queries. Feature Queries are not supported in Internet Explorer 11 & below, but so what. Awesome feature, lots of potential.</p>
</section>
<section id="ten">
<h3>10. Gradient Background, Borders & Text</h3>
<p>Change the color variables to change background, borders & text. Mostly webkit right now. Will only be misused & abused.</p>
</section>
<section id="eleven">
<h3>11. Variables for Customization</h3>
<p>Control colors, whitespace & fonts easily with Golbal CSS variables. Variables are easy to learn & make life easier.</p>
</section>
<section id="twelve">
<h3>12. Pixel-Free UI</h3>
<p>No pixels are used anywhere in this UI, opting instead for vh/ vw/ em/ %. Sometimes it produces weird results. We like it.</p>
</section>
<section id="thirteen">
<h3>13. Scrollbar Customization</h3>
<p>They were so preoccupied with whether or not they could, they didn’t stop to think if they should. Scrollbars can now be customized, you can even use box-shadow to make art. If your scrollbar looks normal, try a different {webkit} browser. ———————>>>>>.</p>
</section>
<footer>
<h3>Credits</h3>
<ul>
<li><a href="https://www.creativebloq.com/features/10-amazing-new-css-techniques">Article</a></li>
<li><a href="https://github.com/eliheuer/titillium-web-vf">Font</a></li>
<li><a href="https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fvuild.com%2F2019-features%2F">Valid HTML</a></li>
<li><a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fvuild.com%2F2019-features%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en">Not even close</a></li>
</ul>
</footer>
New CSS Features for 2019
A responsive, highly flexible, lightweight, pixel-free, mostly automated website UI demo. https://vuild.com/2019-features
Based on a recent article by Rachel Andrew with a few additions & modifications. https://www.creativebloq.com/features/10-amazing-new-css-techniques
Inspired by the new CSS Tricks redesign. https://css-tricks.com
About 5kb. < 200 lines of CSS. Looks terrible in most browsers right now, open three.
New CSS Features for 2019 including:
Gutters for Flexbox, Logical Properties & Values, Grid level 2 & Subgrid Initial Letter (drop cap), Variable Fonts, Scroll Snapping, Detect Pointer Type, Syntax Improvements for Media Queries, Feature Query, Gradient Background, Borders & Text, Variables for Customization, Pixel-Free - VH/ VW Spacing, Bugly (beautiful-ugly) Scrollbar
A Pen by Sam Hansen on CodePen.
/* Comment number corresponds with feature */
/* 11. CSS Global Variables */
:root {
--header-font:'TitilliumWeb-Roman-VF', sans-serif; /* 5. Variable font default */
--body-font:sans-serif ;
--main-color:#f1f1f1;
--light-color:#fff;
--dark-color:#222;
--begin-color:#43cea2;
--end-color:#185a9d;
--activity-color:yellow;
--font-size:1.2em;
}
/* 5. Variable font */
@font-face { font-family: 'TitilliumWeb-Roman-VF'; src: url('https://vuild.com/2019-features/TitilliumWeb-Roman-VF.ttf') format('truetype')}
/* https://github.com/eliheuer/titillium-web-vf */
* { box-sizing: border-box; padding: 0; margin: 0}
body {
font-family: var(--body-font);
font-size: var(--font-size);
line-height: 1.6em;
scroll-snap-type: y mandatory; /* 6. Scroll Snap */
}
nav { height: 10vh; background: var(--dark-color)}
footer { height: 20vh; background: var(--dark-color); padding: 2vh 2vw; border-top: .1vh solid var(--light-color)}
footer ul {
display: flex;
flex-wrap: wrap;
row-gap: 2vh;
column-gap: 1vw;
}
footer li {block-size: 1vh;inline-size: 25vh} /* 2. Logical properties */
footer li a{display: block; padding: .9vh 3vw ; border: .1vh solid #333; margin: auto}
a { color:var(--activity-color); text-decoration: none}
p { margin-bottom: 3vh;line-height: 1.7em;
}
h1, h2, h3, h4, h5, h6 {
font-family: TitilliumWeb-Roman-VF; /* 5. Variable font */
font-variation-settings: 'wght' 356.944, 'opsz' 20; /* 5. Variable font settings */
line-height: 1.6em;
}
h2,h3,h4,h5,h6 {
/* 10. Gradient text begin */
background: linear-gradient(to right, var(--begin-color) 0%, var(--end-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
/* 10. Gradient text end */
}
section {
height: 100vh;
padding: 6vh 12vw;
scroll-snap-align: start; /* 6. Scroll Snap each section */
background: var(--main-color);
}
a.btn {
display: block;
border: .2vh solid var(--light-color);
padding: 1vh 5vw;
width: 50%;
text-align: center;
margin: 6vh 0;
color: var(--light-color);
}
:nth-child(odd) a.btn {
border: .2vh solid var(--dark-color);
color: var(--dark-color);
}
/* 7. Detect pointer type: If supports hover */
@media (hover) {
a.btn:hover {color: var(--light-color)}
li a:hover { animation: hover 1s ease-in-out forwards}
a:hover{color: var(--dark-color)}
:nth-child(odd) a.btn:hover{color: inherit}
@keyframes hover {
0% { color: var(--light-color); filter: blur(0)}
50% { color: var(--activity-color); filter: blur(.2vw);transform:scale(1.1)}
100% { color: var(--activity-color); filter: blur(0)}
}
::-webkit-scrollbar-thumb:hover { background:crimson}
}
ol {
padding:1vh 2vw;
/* 10. Gradient border begin */
border-image: linear-gradient(to left, var(--begin-color) 0%, var(--end-color) 100%);
border-image-slice: 1;
border-width: 1vw;
/* 10. Gradient border end */
font-size: .85em;
background: rgba(0,0,0,.3);
max-height:45vh;
overflow-y: scroll;
}
/* 3. Subgrid */
li {
grid-column: 2 / 5;
display: grid;
margin-bottom: .5vh;
grid-template-columns: subgrid;
}
li a { color: var(--light-color)}
.hero li a:before {
content: "✓";
color: lime;
margin-right: 1vw;
}
li:nth-child(10) :after, li:nth-child(11) :after, li:nth-child(12) :after, li:nth-child(13) :after {
content: "Bonus";
background: var(--activity-color);
color: var(--dark-color);
font-size: .4em;
margin-left: 1vw;
padding: .2vh .2vw;
}
/* Alternating section backgrounds */
section:nth-child(even) { background: var(--dark-color); color: var(--light-color)}
h1 {
background: linear-gradient(to left, var(--main-color) 0%, var(--light-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 1vh;
line-height: 1.2em;
font-size: 1.5em;
}
/* 4. Drop Cap */
section p::first-letter {
padding-top: 2vh;
-webkit-initial-letter: 3 3;
initial-letter: 3 3;
color: var(--brand-color);
margin-right: 1vw;
background: linear-gradient(to bottom, var(--begin-color) 0%, var(--end-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
/* 13. Scrollbar Customizations */
::-webkit-scrollbar { width: 5vw}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 1vw var(--dark-color);
background: linear-gradient(to bottom, var(--begin-color), var(--end-color));
}
::-webkit-scrollbar-thumb {
border-radius: 2vw;
height:36vh;
background: red;
background: linear-gradient(to bottom, crimson 0%, red 33%, red 66%, crimson 80%, crimson 100%);
box-shadow: 0 1.5vh 0 crimson, 0 3.5vh 0 darksalmon, 0 6.5vh 0 indianred, 0 9vh 0 orange, 0 13vh 0 darkorange, 0 18vh 0 orangered, 0 22.5vh 0 tomato, 0 26vh 0 salmon, 0 30vh 0 gold, 0 35vh 0 peachpuff, 0 -1.5vh 0 crimson, 0 -3.5vh 0 darksalmon, 0 -6.5vh 0 indianred, 0 -9vh 0 orange, 0 -13vh 0 darkorange, 0 -18vh 0 orangered, 0 -22.5vh 0 tomato, 0 -26vh 0 salmon, 0 -30vh 0 gold, 0 -35vh 0 peachpuff
}
ol::-webkit-scrollbar { width: 1vw}
ol::-webkit-scrollbar-thumb {
border-radius: 1vw;
background: red;
background: linear-gradient(to bottom, crimson 0%, red 33%, red 66%, crimson 80%, crimson 100%);
box-shadow: inset 0 -1vh 0 salmon,inset 0 -2vh 0 orangered, inset 0 -3vh 0 tomato, inset 0 1vh 0 salmon,inset 0 2vh 0 orangered, inset 0 3vh 0 tomato;
}
.hero {
background: #43cea2;
background: linear-gradient(to bottom, var(--begin-color), var(--end-color)) ;
color: var(--light-color);
height: 90vh;
font-size: .8em;
padding: 3vh 8vw;
scroll-snap-align: start;
}
/* Verbose Media Query for now (low browser support, easy switch) */
@media only screen and (min-width: 60em) {
/* 9. Feature Query */
@supports (display: grid) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
display: grid;
grid-gap:5vw;
}
h1 {font-size: 1.6em}
section {padding: 12vh 20vw;font-size:var(--font-size)}
}
.hero {padding: 10vh 18vw; font-size: 1em}
ol { padding:3vh 2vw}
}
/* 8. New Media Query Syntax */
@media (width <= 30em) {
footer {color: var(--light-color);background:var(--dark-color)}
}
/* HTML logo. Delete/ replace. */
.logo {
font-family: TitilliumWeb-Roman-VF;
padding: 1vh 5vw 0;
text-transform: uppercase;
color: var(--text-color);
font-weight: 700;
font-size: .9em;
display: block;
width: 50vw;
background: linear-gradient(to bottom, #ccc 0%, var(--light-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.logo::before {
content: "";
color: var(--light-color);
font-size: 4em;
display: block;
background: #d02b30;
margin-top: 1vh;
line-height: 1vh;
height: 4vh;
width: 8vh;
border: .3vh solid var(--light-color);
border-radius: var(--border-radius);
}