Writing in the front

Front-end technology changes with each passing day. We need to keep learning to update our front-end knowledge and apply it to our own projects. This time, I have sorted out some CSS features that are popular in the future or that students may have used now, including SVG ICONS, scrolling features, CSS custom attributes, CSS modern pseudo-classes, JS in CSS, Web Layout, mixed mode and filters, CSS counters and so on.

SVG icon

Scalable Vecgtor Graphics 2 (SVG2) is a separate and mature system for SVG and has its own specification (SVG2). Although the specification has been around for a long time, many of the features related to SVG have been supported differently across browsers. In particular, SVG features related to gradients and filters. However, as the technology changes, THE use of SVG in Web applications is increasing, especially the use of SVG ICONS.

  • Earliest references to ICONS via tags (one file per icon)

  • In order to save the request, the concept of Sprites is proposed, which is to combine multiple ICONS together, use a picture file, and realize the icon with the help of background related properties

  • After all, images are bitmaps. For multiple devices, or to make it easier to control the color and size of ICONS, start making Web ICONS using Icon Font

  • Of course, the font icon is to solve many problems, but each time for the use of different ICONS, need to customize the font, but also to load the corresponding font file, the corresponding also brought some problems, such as cross-domain problems, font loading problems

  • As SVG becomes more and more supported, people are thinking about SVG and using IT to make ICONS. This technology can solve most of the problems we’ve encountered before, especially when it comes to many terminal devices

  • SVG is similar to IMG, and we can also use

    tags and

    tags to stitch all SVG ICONS together, similar to the technique used in Sprites, but called SVG Sprites here

<! -- HTML -->
<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="half-circle" viewBox="0 0 106 57">.</symbol>
    <! -... -->
    <symbol id="icon-burger" viewBox=24 24 "0 0">.</symbol>
</svg>
Copy the code

SVG Sprites are different from IMG Sprites. SVG Sprites are some code (similar to HTML). It’s really simple and can be done with some design software such as Sketch. You can also use build tools such as SVG-Sprite. With this in place, use the

tag and specify the corresponding ID value in

. For example:

<svg class="icon-nav-articles" width="26px" height="26px">
    <use xlink:href="#icon-nav-articles"></use>
</svg>
Copy the code

Another advantage of using SVG ICONS is that we can control the color of the ICONS directly from the code in CSS:

.site-header .main-nav .main-sections>li>a>svg {
    // ...
    fill: none;
    stroke-width: 2;
    stroke: #c2c2c2;
}
.site-header .main-nav:hover>ul>li:nth-child(1) svg {
    stroke: #ff8a00;
}
Copy the code

Complete demo

Rolling features

There are many new CSS features for container scrolling, such as:

  • Customize the look of the scroll bar
  • scroll-behaviorRefers to the container rolling behavior, so that the rolling effect more silky
  • overscroll-behaviorOptimizing the rolling boundary, in particular, can help us with the penetration of the rolling

Customize the look of the scroll bar

Default Window appearance and MAC appearance

windows mac

In CSS, we can use -webkit-scrollBar to define the look and feel of the scrollbar. This attribute provides seven pseudo-elements:

  • ::-webkit-scrollbar: The entire scroll bar
  • ::-webkit-scrollbar-button: Scroll bar button (down arrow)
  • ::-webkit-scrollbar-thumb: Scroll slider on the scroll bar
  • ::-webkit-scrollbar-track: Scroll bar track
  • ::-webkit-scrollbar-track-piece: The track portion of the scroll bar without a slider
  • ::-webkit-scrollbar-corner: The part where both vertical and horizontal scroll bars meet
  • ::-webkit-resizer: The partial style of the intersecting parts of certain elements (similartextareaDraggable button of)

For example, in the above video, the scrollbar appearance for the entire page is custom, using the -webkit-scrollbar pseudo-element in the HTML:

html {
    --maxWidth:1284px;
    scrollbar-color: linear-gradient(to bottom,#ff8a00.#da1b60);
    scrollbar-width: 30px;
    background: #100e17;
    color: #fff;
    overflow-x: hidden
}

html::-webkit-scrollbar {
    width: 30px;
    height: 30px
}

html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to bottom,#ff8a00.#da1b60);
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255.255.255.25),inset -2px -2px 2px rgba(0.0.0.25);
    box-shadow: inset 2px 2px 2px rgba(255.255.255.25),inset -2px -2px 2px rgba(0.0.0.25)}html::-webkit-scrollbar-track {
    background: linear-gradient(to right,#201c29.#201c29 1px.#100e17 1px.#100e17)}Copy the code

With these pseudo-elements, you can create your own scrollbar look, such as the following example:

Complete demo

CSS custom properties

You’ve probably heard of CSS custom properties, also known as CSS variables, but you’ll probably be familiar with SCSS and LESS. The concept is the same, making CSS maintainable. The latest version of Edge now supports this feature, which means that CSS custom properties can now be used in real projects. Developers will be relying heavily on this feature in the near future. However, please check the Postcss support for CSS custom properties in the appendix to this article for compatibility before using it.

What are custom properties? It is simply a CSS property that developers can name and use. The browser needs to accept a specific value for a property such as color or position, but a custom property is meaningless until the developer gives it a value. So how do you assign a CSS custom property? It is no different from habit

.foo {
  color: red;
  --theme-color: gray;
}
Copy the code

The definition of a custom element begins with a –, so the browser can distinguish between custom and native attributes and treat them separately. If only a custom element and its attribute values are defined, the browser does not respond. In the code above, the font color of.foo is determined by color, but –theme-color has no effect on.foo.

You can use CSS custom elements to store any valid CSS property value

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0.0.0.0.85);
}
Copy the code

use

If custom properties are only used to set values, they are useless. At the very least, the browser has to be able to get their property values.

Using the var() method:

.button {
  background-color: var(--theme-color);
}
Copy the code

In this code, we assign the background-color property of.button to the value of –theme-color. This example doesn’t seem like much of a custom property, but this is a hard-coded case. Did you realize that the –theme-color property value can be applied to any selector or property? That’s pretty impressive.

.button {
  background-color: var(--theme-color);
}
 
.title {
  color: var(--theme-color);
}
 
.image-grid > .image {
  border-color: var(--theme-color);
}
Copy the code

The default value

What if the developer didn’t define the –theme-color variable? Var () can take a second argument as a default:

.button {
  background-color: var(--theme-color, gray);
}
Copy the code

Note: If you want to use another custom property as the default, the syntax should be background-color: var(–theme-color, var(–fallback-color)).

It is a good practice to always pass a default value when passing parameters, especially when building Web Components. To make your pages work on browsers that don’t support custom properties, don’t forget to add compatibility code:

.button {
  background-color: gray;
  background-color: var(--theme-color, gray);
}
Copy the code

CSS modern pseudo-classes

These are the latest pseudo-class features that we also need to know about.

Complete demo

JS in CSS

As mentioned earlier, when you use CSS to customize a property, you can manipulate the value of the custom property through JavaScript. Even more powerful, if you’re familiar with CSS Houdini, you can use Houdini’s features to manipulate CSS custom properties directly in CSS code

:root {
  --property: document.write('hello world! ');
}
Copy the code
window.onload = () = > {
  const doc = window.getComputedStyle(document.documentElement);
  const cssProp = doc.getPropertyValue('--property');
  new Function((cssProp))();
}
Copy the code

Complete demo

Web layout

For Web layout, the front end is always trying to figure out the best way to do this. Early table layouts, followed by float and position-related layouts, multi-column layouts, Flexbox layouts, Grid layouts, etc. With Flexbox and Grid, Web layouts are becoming more flexible.

Figure does not rely on the media query to achieve automatic calculation

CSS Grid provides many powerful features, such as:

  • frUnits, which is a good way to calculate the available container space
  • repeat()Function, which allows us to specify the same value for multiple columns in the grid. It also accepts two values: a repeated sublow and a repeated value
  • minmax()Function, which allows us to control the size of the grid track with the simplest CSS, including a minimum and a maximum
  • auto-fillandauto-fit, cooperaterepeat()Function, which can be used instead of the number of repetitions, allows you to flexibly change the number of columns in the grid according to the width of each column
  • max-contentandmin-contentYou can determine the width of a column based on the contents of the cell
  • grid-suto-flowThe CSS Grid layout can be arranged automatically

Combined with these function points, the layout becomes much easier. For example, if we want to implement a responsive Layout, many times we will rely on the media query (@media) to handle. In fact, with CSS Grid Layout, it is much easier to implement a responsive Layout without relying on any media query. Especially in this era, to face the terminal equipment will only increase will not decrease, so hope the Layout is easier to adapt to the Layout of these terminals, then CSS Grid Layout will play a great role.

Complete sample

Both Grid and Flex are the best layouts for the future. We should not discuss who is superior and who is inferior, but should learn from each other and use a combination of strengths and weaknesses.

Blend mode and filter

If you can implement it with CSS, you don’t have to bother with JavaScript — Part2 mentions mixed mode. CSS blend mode and filters are mainly used to manipulate images. Those of you who are familiar with software like Photoshop will easily understand the properties.

Full code demo

CSS counter

CSS counters actually involve three properties: counter increment, counter-reset, and counter(). This is usually done with CSS pseudo-elements ::before and ::after content. It can be used to count

Complete demo

Write in the last

These are some of the best features of CSS. There are many more, I will collect more to share with you when I have time. These new features vary from browser to browser. But that’s not what keeps us from learning and exploring. We should understand and apply them in time, so that we can achieve excellence in the project.