7 Amazing New CSS Techniques For 2019
This is the right time to choose web development as a career option. Just like web designers, web developers also fascinated with ways to try new CSS techniques and push the limits of what CSS can do.
Here, we will take a look at some of the new CSS techniques and entire specifications that are making their way into creative designs. You can control almost any aspect of a design by a well-described CSS. Also, it can enhance a better overall user experiences—with cleaner and more consistent code.
1. Initial Letter
Initial letter is a CSS property, property that selects the first letter of the element and specifies the number of lines occupied by the letter. Most often it is used in print media and information sites, news sites, where the first letter of the paragraph is with much higher than the rest of the content.
The initial-letter property automatically adjusts both the number of lines needed to create the stylized drop cap and the font size. Initial-letter approves the following values:
- <number> refers to how many lines the letter occupies in which negative values are not accepted;
- normal is useful if you want to reset the value if it could be inherited from the cascade and no scaling effect applied to the first letter;
- <integer> determines the number of lines in which the letter should sink when its size is preset. The values must be greater than zero, and if the value is not specified, the size value is duplicated, floored to the nearest positive whole number;
The ::first-letter pseudo-element can be used to select characters that will be formatted as initial letters. The ::first-letter pseudo-element does not select the first letter of the element that has the display: inline, but only works on elements that have a display value of block, table-cell, table-caption, or list-item.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Serif;
font-size: 20px;
margin-bottom: -15px;
}
h1 {
font-family: Sans-serif;
font-size: 3.1em;
color: black;
}
body {
padding: 10px;
}
div {
width: 550px;
line-height: 25px;
}
p:first-of-type:first-letter {
background-color: black;
color: white;
float: left;
font-size: 50px;
margin-right: 10px;
margin-top: 7px;
padding: 18px;
box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>
2. Variable Fonts
Variable fonts represent a new set of features defined as part of the OpenType specification and allow font files to contain multiple variations of a font in a single file, called variable font. In practice, it allows you to access the variables contained in the font file with only one @ font-face reference. Also, variable fonts allow functions such as transitioning font styles, custom font styles and animating.The benefit of using the variable font is that you have access to the full range of available styles, weights and widths.
Variable fonts define their variations through axes of variation and there are 5 standard axes:
- ital: italic axis works differently because it is enabled or disabled, there is no in-between. The value can be set using the font-style CSS property. Also, by introducing font-synthesis: none, will prevent browsers applying accidentally the variation axis and a synthesized italic.
- wght: controls the font’s weight and the value can be set using the font-weight CSS property.
- wdth: controls the font’s width and the value can be set using the font-width CSS property.In CSS using the font-stretch property, we can set the font width with percentage values and if we supply a value that is outside the font-encoded domain, the browser makes the font at the closest allowed value.
- opsz: optical sizing refers to the practice of changing the font’s optical size and the value can be set using the CSS font-optical-sizing.Optical size values are automatically applied depending on the font size, but can be manipulated using the font-variation-settings.When using font-optical-sizing, the admitted values are auto or none, and when using font-variation-settings, a numeric value is provided.
- slnt: controls the slant of the font and the value can be set using the font-style CSS property.It is variable by being expressed as a numerical range, and this allows the font to be varied anywhere along that axis.
Using variable fonts with @font-face – when using variable fonts on the web, this involves defining @ font-face rules that indicate variable font files.Here are 2 links that allow you to find variable fonts: axis-praxis.org and v-fonts.com.
<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
font-family: 'Avenir Next Variable', sans-serif;
}
p {
font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>
3. Logical Properties and Values
Logical Properties and Values is a CSS module that introduces logical properties and values that make it possible to control the appearance through logical directions and dimension mappings.Logical properties and values use the terms like block and inline to describe the direction in which they flow.The Logical Properties and Values specification characterizes mappings for physical values in their logical relations.
The inline dimension – is the dimension along which a text line is written in the type of writing used. So, in a random English document, the text is horizontal, from left to right, in another Arabic document, writing is also horizontal but from right to left and if we take into account a Japanese document, the inline dimension is now vertical because the writing mode run vertically.
The block dimension – corresponds to the order in which the blocks are displayed on the page. In English and Arabic they are executed vertically, while in any vertical writing mode they are executed horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
html {
font: 20px Sans-serif;
}
body {
padding: 25px;
background-color: lightyellow;
color: black;
}
.box {
border: 4px solid black;
border-radius: 20px;
padding: 20px;
margin: 12px;
}
.one {
block-size: 100px;
inline-size: 200px;
}
.two {
height: 100px;
width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>
4. Scroll Snapping
The scroll-snap-type CSS property determines the rigidity with which attachment points are applied to the scroll container.In other words, it lock the viewport to certain elementsor locations after the user has finished scrolling.It is an excellent way to display image galleries.Previously, it could be used with JavaScript, but thanks to the new CSS Scroll Snap module, the effect can be controlled in CSS.Scroll snapping is done by defining the parent / container element and children in the container that will snap according to the rules defined within the container.Scroll-snap-type property is the most important property that applies to the container element.Defines the scroll snap axis x, y, block, inline or both and the scroll snap strictness none, proximity or mandatory.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
height: 50%;
}
.C {
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: arial;
}
.container {
display: flex;
flex: none;
overflow: auto
}
.container.x {
width: 70%;
height: 150px;
flex-flow: row nowrap;
}
.container.y {
width: 256px;
height: 256px;
flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
.x.container> div {
line-height: 128px;
font-size: 64px;
width: 100%;
height: 128px;
}
.y.container> div {
line-height: 256px;
font-size: 128px;
width: 256px;
height: 256px;
}
.y.container>div:{
line-height: 1.4;
font-size: 80px;
}
.container >div:{
background-color: white;
}
.container >div:{
background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
5. Grid Level 2 and Subgrid
The level 2 specification contains everything in Level 1 and some new features. Level 2 of the grid specification creates the subgrid feature of CSS Grid.In the following lines, we will look at the subgrid feature as it is currently detailed in the Editor’s Draft of Grid Level 2.So, you can make grids when you use the Grid layout option, a grid element can be transformed into a grid container by setting display: grid on it.In the example below, I have an item that includes 3 column tracks of the grid, is a container grid with 3 column tracks, and these do not do not line up with the tracks of the parent.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
margin: 20px;
}
.one {
background-color: black;
color: white;
border-radius: 20px;
padding: 20px;
font-size: 120%;
}
.A .one {
background-color: lightgrey;
}
.GRID {
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
background-color: white;
color: black;
margin: 1.5em 0;
}
.A {
padding: 0;
grid-gap: 15px;
grid-column: auto / span 4;
display: grid;
grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>
Being an open source project, you can see on GitHub how the work evolving in the CSS group. The development of browser specifications and implementation is a circular process. So you can watch how this subgrid feature is progressing and of emerging browser implementations.
6. Use CSS to Test Browser Support
CSS has developed a way to test browser support for new features. Basically, ask a question to find out if the browser accepts a specific CSS feature. This way makes the new features use in a safe and concise way.When using any new CSS feature, you need to check if the browser supports that feature.On this line, it is recommended that you consult the data on caniuse.com, where you can import the data for your location.
The @supports CSS allows you to specify declarations that depend on browser support for CSS features, this being called a feature query. This rule can be written at the top of the code or it may be nested inside any other conditional group at-rule.
@supports (display: grid) {
div {
display: grid;
}
}
7. Syntax Improvements For Media Queries – Level 4
The Media Queries Level 4 specification contains some improvements to the syntax to make media queries using features that have a range type such as height and width.
To exemplify, we use max-functionality for width
@media (max-width: 20em)
We can try a width between two random values using min- and max-
@media (min-width: 20em) and (max-width: 35em)
For a better understanding, in the example above we want to say that the width is greater than or equal to 20em and smaller or equal to 35em
Conclusion
Website developers should be aware of any new CSS techniques and apply them in future projects. They will raise their work standards and customers will be pleased with the improved website look.
Css is used to to add styles and layouts of web pages, thanks for sharing the useful article…