Front End Daily (200309)

from<input type="number"> 到 <input type="text" inputmode="numeric" pattern="[0-9]*">

The design specification for gov.uk has recently been revised by the team that designed it. Numeric “pattern=”[0-9]*”> instead of . Some of the problems associated with using the type=”number” input box are avoided.

For example, in Chrome 79, using the up and down buttons to control the type=number input box, it turns into a scientific notation when the number is too large.

I don’t know.

As of Chrome 76, the tag supports loading to enable lazy image loading.

<img src="..." loading="lazy" alt="..." width="200" height="200">
<img src="..." loading="lazy" alt="..." style="height:200px; width:200px;">
<! -- lazy-loaded -->
Copy the code

The effect is as follows:

Here is an example of a fallback using Lazysizes, a lazy loading library:

<! -- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="...">

<! -- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="..." loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="..." loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="..." loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img= > {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>
Copy the code

• use<img data-src>replace<img src>.
• If the browser supportsloadingProperties, whichdata-srcSet tosrc.
• If the browser does not support itloadingProperty, using lazysizes, for each resource that needs lazy loadinglazyloadThis class name, which is the default tag used by LazySizes as a lazy-loaded resource.

The one-line truncation technique is something you’ve probably done before.

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}
Copy the code

So how do I do multiple line truncation? The answer is to use the Line-clamp attribute:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
Copy the code

It is also prefixed with -webkit-. All major browsers except Internet Explorer already support it.

LuLu UI

A suitable for PC, for external users of the website development framework, the code is mainly maintained by Zhang Xinxu teacher.

Style guide for use on UK government websites.

Fire Code is a cool programming font that provides a combined style of symbols commonly used in various programming languages.

Take installing under Widows as an example.

1. Download font library.ttfFiles, click one by one to install

2. Then set the font in VSCode

3. Restart the VS Code editor.

• fortarget="_blank"Links to addrel="noopener"To avoid safety and performance issues (provenance).

<a href="https://web.dev" target="_blank" rel="noopener">web.dev</a>
Copy the code

• To get rid of<input type="number">The Spinners.

::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
Copy the code

• withvarDeclared variables are not restricted to global or function scope-they are limitedcatchBlock scope.

try {
  var t1 = 't1'
} catch {
  var t2 = 't2'
} finally {
  var t3 = 't3'
}

t1 // "t1"
t2 // undefined
t3 // "t3"
Copy the code

• Set font to “font_face” in Sublime (source)

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)