这里是 Frontend Focus 的中文翻译项目,每周在 己思 平台首发。
翻译及校对:richshaw2015,Yully Che
Here’s a closer look at the recent changes introduced to HTML form controls within Chrome, designed to “beautiful, webby, and neutral”. They bring with them a host of accessibility wins, touch support, and more consistent keyboard access.
来源:Rob Dodson (Google)
Chrome 81 will now be released on April 7. Here’s the official blog post from Google announcing that releases are now resuming.
来源:Catalin Cimpanu (ZDNet)
Two years in comes version 2.0, along with 10K GitHub stars to boot. v2.0 has a new Markdown parser, better syntax highlighting, improved scroll syncing and live previews, and more. GitHub repo.
来源:NHN
TLS 1.0 and 1.1 has been re-enabled in the Firefox Stable and Beta browser because of Google and government sites that still rely on these protocols. Google has taken a similar, temporary, step due to the COVID-19 crisis, too.
来源:Martin Brinkmann (gHacks)
This guide aims to help you figure out which approach makes the most sense when considering popular design trends for your site.
来源:Suzanne Scacca
In this advanced guide Patrick Stox explains how page speed works, and what actions to take for your site.
来源:Ahrefs
Yep, this is a feature list trying to convince folks to give Edge a try. I didn’t know about a few of the things Edge now offers, including an interesting ‘vertical tabs’ mode.
来源:Liat Ben-Zur
playsinline
属性Have you noticed how sometimes in mobile browsers a video will play right where it is instead of the fullscreen default? Here’s how that works.
<video src="..." controls playsinline></video>
来源:Chris Coyier
An exploration into how to make inputs more accessible, touching upon semantic HTML and a bit of ARIA.
<div class="form-group">
<label for="password">
Password
<span class="required" aria-hidden="true">*</span>
<span class="sr-only">required</span>
</label>
<input
type="password"
id="password"
name="password"
autocomplete="new-password"
aria-invalid="true"
aria-describedby="error_pw desc_pw"
>
<p class="aside" id="desc_pw">Your password needs to have at least eight characters.</p>
<p class="error" id="error_pw">Please check your input.</p>
</div>
来源:Oscar Braunert
This works mainly as a refresher on how to do intrinsic aspect ratio sizing in CSS for any embedded media, but it’s specific to Twitch embeds.
来源:Phil Nash
A guide with a list of different things we might normally do with a JavaScript library, but can now be done using native APIs.
来源:Nguyen Huu Phuoc
The upcoming version five of popular framework Bootstrap is officially dropping support for both Internet Explorer 10 and 11. Here’s a quick look at what that means for those relying on Bootstrap, and what workarounds (polyfills) to expect.
来源:Zoltán Szőgyényi
CodeMirror is an open source project that makes it easy to build advanced text editors into your frontend apps. Here’s how to build a code editor with it and how to connect together all the pieces.
CodeMirror(document.querySelector('#my-div'), {
lineNumbers: true,
tabSize: 2,
value: 'console.log("Hello, World");'
});
来源:Valeri Karpov
An overview about why using a backend-as-a-service like GraphCMS is a viable way to go for MVPs.
来源:Stephen Jensen
来源:Marvin Danig
来源:Chris Coyier
Drawing inspiration from American gothic typeface designs, this is Adobe’s first open-source typeface family (and is made up of 12 weights). Designed by Paul D. Hunt it was conceived primarily as a typeface for user interfaces boasting wide-ranging language support and a focus on clarity and legibility.
A pure CSS library with plenty of stylish toggles. Here’s the related GitHub page.
来源:Enkai Ji
Although still in alpha, this is a massive update that puts the icon library at over 500 icons and adds a permalink page for each.
来源:Mark Otto, Jacob Thornton, and Bootstrap contributors
An open-source design tool to make animated GIFs and videos to showcase your products. Try it here.
来源:Alyssa X
Based on a pay-what-you-want model, this allows you to test any of the ~900 fonts on Google Fonts or using any locally installed font.
来源:snapfont
译者注:如需了解,请查看原文。
译者注:如需了解,请查看原文。
Copyright © 2015-2022 BY-NC-ND 4.0