Web Tips (17)

If you want to go, click on the link above to buy tickets.

That’s it. Let’s move on.

CSS Drawing graphics

CSS graphics drawing is not a new thing in the community. In the last team week, some students asked me how to use CSS to draw graphics. Do you have any tools? Is there any technique. There is no shortcut to using CSS to draw graphics, just some internal work. Internal work practice good, drawing graphics is still very simple. @Wentin, for example, has drawn 512 ICONS with pure CSS:

Two days ago @Zhang Xinxu the old driver also completed a CSS drawing icon library:

@Zhang Xinxu the old driver also wrote two articles specifically for this aspect: “common pure CSS icon code separation and sorting” and “It’s time, CSS development strategy without external chain”.

@hj_Chen also shared the theme of Creating Art with CSS in talk.css:

There are many tutorials on how to use CSS to draw ICONS:

• Single Div Drawings with CSS
• A Beginner’s Guide to Pure CSS Images
• How I started drawing CSS Images
• How to create pure CSS illustrations and animate them: Part1, Part2 and Part3
• Pure CSS Drawing Essentials

In addition, there are two very interesting things about the community. For example, @Lynn Fisher organized using a div to draw various graphics and CSSBattle (drawing graphics with minimal code) :

If you look at other people’s code, you will see that in CSS, you can draw some graphics or texture patterns with border, box-shadow and gradient.

Introduce it this waybackground-blend-mode

Remember that CSS mixed mode computing was introduced in Web Tips # 5, and the use of mixed mode in CSS was introduced in # 6. Natalie uses a different way to introduce background-blending-mode property in her tutorial background-blending-mode Property:

Interlaced CSStransitionThe effect

To show you what an interleaved CSS transition is:

The key is that transition-delay on different lists uses different values:

@media (hover: hover) { .list li a span { transform: translateY(100px); The transition: 0.2 s; } .list:hover span { transform: translateY(0); }. List li:nth-child(1) span {transition-delay: 0.0s; }. List li:nth-child(2) span {transition-delay: 0.05s; }. List li:nth-child(3) span {transition-delay: 0.1s; }. List li:nth-child(4) span {transition-delay: 0.15s; }. List li:nth-child(5) span {transition-delay: 0.2s; }. List li:nth-child(6) span {transition-delay: 0.25s; }}Copy the code

It doesn’t look like anything special. But there is a point we usually do not pay much attention to, that is, in the @media conditional can also use (hover:hover). This feature is new to CSS Media Queries Level 4.

Two new features have been added to this specification: mouse hover and Pointers.

If you are interested in this new feature, you can also read the following articles:

• What the hell’s up with @media not?
• Detect a touch device with only CSS
• Introducing CSS Interaction Media Queries
• Using Media Queries For Responsive Design In 2018
• Useful CSS Media Query Features

In addition, new features in CSS Media Query Level 5 make Media queries easier and more flexible. Such as:

// BEFORE @media (min-width: 20em), (min-height: 40em) {@media not all and (min-height: none) {... }} @media (min-width: 20em) and (max-width: 20em) {... } // AFTER @media ((min-width: 20em) or (min-height: 40em)) and (not (pointer: none)) {... } @media (20em <= width <= 40em) {... }Copy the code

CSS@What you don’t know about the rules

In the Illustrated CSS series, there is a section devoted to conditional CSS-related properties such as @media, @Supports, @viewPort, and so on. These attributes are part of the @ rule of CSS.

There are some @ rules that we don’t pay much attention to. Like the selector weights in the @ rule. Take @Media, @Keframes and @Supports for example.

Take this example:

body { background: red; } @media (min-width: 1px) { body { background: black; }}Copy the code

The background color of the resulting page is black. Is this because @Media increased the weight of the selector? With that in mind, consider the following example:

@media (min-width: 1px) {
    body {
        background: black;
    }
}
body {
    background: red;
}
Copy the code

The result background is RED. In this way, @media does not affect selector weights.

Take a look at @Keyframes:

@keyframes winner { 100% { background: green; } } body { background: red ! important; animation: winner forwards; }Copy the code

You might expect the final background color to be red, especially if there are! Important under the condition of saving. In Chrome it’s green (though in Firefox it’s red, which has reportedly been a Firefox pit since 2014). @keyFrames does not increase the weight of the selector, but the styles in @KeyFrames overwrite the styles outside the rule. To give you an illusion: the selector for @Keyframes has more weight.

For an introduction you can read @Chris Coyier’s How Much Specificity Do @Rules Have, Like @Keyframes and @Media? The article.

To expand on this, does @supports affect selector weights? In this example, what is the final background color?

@supports (--a: b){ body { background: red; } } body { background: green; } @supports (--a: b){ body { background: yellow; }}Copy the code

If you can’t tell, try running the example above in your browser.

Another interesting aspect of the @rule is that @support and @media can be nested within each other and are not dependent on any CSS processor:

@supports (--a: b) { @media (min-width: 1px) { body { background: red; }}}Copy the code

Or:

@media (min-width: 1px) { @supports (--a: b) { body { background: #f36; }}}Copy the code

It can be even more complicated:

@media (min-width: 2px) {
    @media (min-width: 1px) {
        @supports (--a: b) {
            @supports (display: flex) {
                body {
                    background: pink;
                }
            }
        }
    }
}
Copy the code

Although written this way, the browser can recognize it. But be aware that the deeper you nest, the deeper you dig yourself.

Slash body and font variables

In the article font-variation-*, introduced the use of font variables. Font -variation-*

In font-variable-settings we can use SLNT to set the italic text effect. In addition to this method, font style: Oblique can be used instead. You can also use the font variable WGHT to bold the text. In other words:

font-variable-settings: "wght" 500; // equivalent to font-weight: 500 font-variable-settings: "SLNT" 4; // Equivalent to line-height: oblique 4degCopy the code

That is:

/* BEFORE */
h2 {
    font-variation-settings: "wght" 500, "slnt" 4;
}

/* AFTER */
h2 {
    font-weight: 500;
    font-style: oblique 4deg;
}
Copy the code

For more information on this, read:

• CSS oblique value for slanted text
• variable web TYPOGRAPHY
• Variable fonts guide

If you combine CSS animation with Splitting JS, you can also do some more interesting text effects, such as:

The Demo above comes from the article Variable Font Animation with CSS and Splitting JS.

Mandy Michael created VariableFonts. Dev with different fonts to create amazing dynamic effects of font variables.

Subpixel rendering and borders

Subpixel rendering has always been a headache. There are many discussions about this in the community:

• Sub-Pixel Problems in CSS
• Not so pixel perfect in Firefox
• Sub-Pixel Font Rendering Technology: How it works?
• Subpixel rendering and image resizing
• Improving Font Rendering With CSS
• CSS Sub-pixel Background Misalignments
• Antialiasing 101
• Browser Rounding and Fractional Pixels

Especially in layout scenarios such as Flexible layout, VW layout, or % units, different browsers translate values with different decimals.

Just recently, @hj_Chen talked about sub-pixel and border at the first Talk.CSS conference in Melbourne. How does the minimum padding value of a box model differ from browser to browser?

Screenshot in Firefox

Screenshots in Chrome

Screenshot in Safari

Back in the article there was a discussion about border-width. Here is a description from the W3C specification:

The lengths corresponding to thin, medium, and thick are not specified, Throughout a document and thin ≤ medium ≤ thick. make the thickness depend on the medium font size: one choice might be 1, 3 & 5px when the medium font size is 17px or less. Negative

values are not allowed.

Read the original for a detailed discussion!

Two tips from Flexbox

At the 5th CSS Conf Conference, @hj_Chen shared the topic of “CSS Layout in the New Era” :

Here is a tip about Flexbox that you might miss in your daily use:

After a Demo like the following:

For more on the use of margin in Flexbox, see the following example:

If you’re interested, you can also read the following tutorials:

• The peculiar magic of flexbox and auto margins
• Everything You Need To Know About Alignment In Flexbox
• Explore the magic of automatic Margins in flex context

What you Don’t Know about CSS Overflow Module But we missed a scenario about using overflow and padding on Flexbox containers. Ignore the padding at the end of the scrolling container. Such as:

.container {
    display: flex;
    overflow-x: scroll;
    padding: 1em; /* browsers ignore the padding-right component */
}
Copy the code

You should see something like this:

The solution to this problem is simple:

.container::after { content: ''; Padding - right: 0.02 px; /* smallest size that is cross browser */ }Copy the code

Read Flexbox and Padding, which explains why. The following examples are from this tutorial:

goodbye<iframe>

BBC has moved

tab-sizeAlso to the

Now you can use tab-size to adjust the amount of space displayed for TAB characters:

pre {
    tab-size: 8; /* default. Pretty big! */

    tab-size: 2;
    tab-size: 13px; /* you can set a width-per-tab also */
}
Copy the code

Take a look at an example:

The example above is from tab-Size by @Chris Coyier.

Day/Night Ambient Light Animation

Finally, I’ll show you a case of @Mandy Michael, who can switch between day and night depending on the environment. Interesting: