摘要:目錄零碎的知識一新的媒體查詢屬性這個媒體查詢屬性的作用是,當(dāng)用戶在操作系統(tǒng)中設(shè)置了的選項時,能夠根據(jù)其值聲明不同的樣式,因為有的人可能喜歡炫酷的特效,有的人可能更傾向于內(nèi)容比如我,而有的人甚至因為生理問題無法接受這些特效。
目錄
零碎的知識(一)
新的媒體查詢屬性 prefers-reduced-motionhttps://developers.google.com...
https://developer.mozilla.org...
這個媒體查詢屬性的作用是,當(dāng)用戶在操作系統(tǒng)中設(shè)置了 reduced-motion 的選項時,能夠根據(jù)其值聲明不同的 css 樣式,因為有的人可能喜歡炫酷的特效,有的人可能更傾向于內(nèi)容(比如我),而有的人甚至因為生理問題無法接受這些特效。
瀏覽器首個內(nèi)置 module KV Storagehttps://developers.google.com...
https://wicg.github.io/kv-sto...
localStorage 當(dāng)前的問題:
性能比較慢,而且會阻塞主線程
api 設(shè)計的太簡單了,同時它們是同步的
很容易發(fā)生命名空間沖突,這意味著開發(fā)者必須做出一些額外的工作,比如增加自定義前綴
雖然可以使用 IndexedDB 來作為后補方案,但是它不不是那么好用
KV Storage 的特點:
瀏覽器內(nèi)置 module,意味著它無需被下載解析后才能使用
api 與 js 中的 Map 更接近,更友好,同時它們是異步的
性能更好
自帶命名空間,有效防止沖突
值得注意的時,使用它是需要做一些降級的工作,以應(yīng)對各種不支持該 module 的情況(有好幾種,并不是兩種),詳情可以參考 google-developers 上的文章。
week-year 是什么?如果是做后端同學(xué)應(yīng)該會比較了解,比如 Java,YYYY 和 yyyy 對于年來說講是兩種不同的意義,而 YYYY 則代表按 week-year 來解析。
其定義是這樣的,以星期一為周始,以星期日為周末,第一個包含該年度四天以上的周,算作該年度的第一周,因此,2014-12-31 按 YYYY 解析出來的年是 2015 ,我截了一張萬年歷的圖,如下:
?
可以發(fā)現(xiàn),最后一周,只有 3 天屬于 2014 年,剩下的 4 天屬于 2015 年,所以這周應(yīng)該算 2015 年的第一周。因此,如果做后端(比如 Java)的話,不是刻意為之,最后使用 yyyy 而不是 YYYY。
關(guān)于 macrotask 和 microtaskjavascript 是單線程的,這個大家都應(yīng)該比較熟,對于異步編程的支持,當(dāng)前有兩個隊列用來支持該功能,分別是 macrotask 和 microtask。
它們的執(zhí)行時機的是:
宏任務(wù)每次在單次事件循環(huán)之內(nèi),嘗試將宏任務(wù)隊列頂部的任務(wù)進(jìn)行執(zhí)行
宏任務(wù)執(zhí)行完畢后,嘗試將微任務(wù)隊列的全部任務(wù)進(jìn)行執(zhí)行,直到隊列為空
之后執(zhí)行后續(xù)操作,然后進(jìn)入下一個事件循環(huán)
值得注意的是,雖然 microtask 任務(wù)會在一個事件循環(huán)內(nèi)全部執(zhí)行,但任務(wù)間的執(zhí)行優(yōu)先級是有區(qū)別的,比如 process.nextTick 和 Promise 會存在優(yōu)先級差別,前者比后者高(暫時沒有標(biāo)準(zhǔn))
.gitignore 對 tracked 的文件不生效怎么辦?通常情況下,.gitignore 文件所聲明的規(guī)則均對 untracked 的文件有效,如果是 tracked 的文件,則不會生效。但是問題來了,我們明知要忽略一個文件,為什么還要將它變?yōu)?tracked 并提交到 git 提交歷史中呢?
一般這樣做的原因主要是想要強迫某個文件創(chuàng)建于其他開發(fā)者的代碼倉庫中,比如說,一般我們在使用環(huán)境變量的配置的工具庫時,比如 nodejs 中常見的 dotenv,這個庫使用 .env 聲明環(huán)境變量,同時我們一般會將這個文件聲明在 .gitignore 中,但是在集成這個庫之前,其他的開發(fā)者是無法預(yù)先創(chuàng)建 .env 這個文件的(當(dāng)然你可以直接通過別的方式告訴他們),這種情況下,我們可以先將 .env 提交到 git 中,之后再在后續(xù)的提交或者 PR 中將它移除提交歷史。
將一個文件移除提交歷史,并變?yōu)?untracked 很簡單,只需要執(zhí)行以下命令:
git rm -r --cached?
這里的 target-file-path 代表要變?yōu)?untracked 的文件路徑,之后再進(jìn)行一次正常的提交即可,比如:
git commit -m "clean up ignored files"如何判定一個函數(shù)為 async 函數(shù)?
var a = async function(){} a.constructor.name // "AsyncFunction" ?簡述 css 的層疊上下文?
https://medium.freecodecamp.o...
普通元素按照文檔流中的順序,之后的元素會疊加在之前的元素之上
擁有非默認(rèn)值屬性的 position 的元素的層疊上下文,比有默認(rèn)值屬性的元素要高
一些 css 規(guī)則,如 opacity 、 transform 會創(chuàng)建隱式的層疊上下文,等價于 z-index: 0
層疊上下文的高低判定依賴于父級元素的層疊上下文,比如一個 z-index: 0 的元素中的 z-index: 999 的元素,永遠(yuǎn)不會覆蓋 z-index: 1 的元素
除此之外,還存在一些別的特征,但這里是簡述,這 4 點應(yīng)該夠了。
如果設(shè)定小于 12px 的字體?一般情況下,有的設(shè)計師會將 12px 作為設(shè)計稿的默認(rèn)最小字體,但如果我們想要將一個元素的字體設(shè)置為 9px 時,怎么辦呢,可能你會直接說直接設(shè)置就好了,但是你會發(fā)現(xiàn),一些瀏覽器提供了默認(rèn)最小字體的設(shè)置,因此類似 font-size: 9px 并不會生效。
但我們可以通過 transform 的 scale 屬性曲線救國,如下:
?
font-size: 12px; transform: scale(0.75);
但這樣做也會有一個問題,就是如果有特別多的元素使用這個樣式,會使瀏覽器創(chuàng)造特別多的層疊上下文,在一些情況下,渲染性能會大打折扣,這時只要將縮放效果提示至父元素就好了,但要主要父元素和尺寸有關(guān)的屬性也需要做相同比例的變更。
同時,一些情況下,還需要通過 transform-origin 來指定變形的原點,通常情況下, transform-origin: left 足夠滿足 90% 的情況。
最后,換行符的計算是在縮放之前,這意味著如果是多行文本,會出現(xiàn)無法填滿單行的情況。
其實有些時候,這種字體縮放問題往往不是字體大小的鍋,而是需要根據(jù)不同文字的使用場景,使用不同的字體,在不同字體中,數(shù)字和字母的默認(rèn)大小是不一致的,因此也可以嘗試通過組合使用多種字體來解決這個問題,比如 Roboto 字體中的數(shù)字默認(rèn)大小為 10px 。
關(guān)注公眾號 全棧101,只談技術(shù),不談人生
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104601.html
摘要:同時,由于本身的實現(xiàn)大部分是純函數(shù),因此在版本中,一些不含副作用的均在中暴露了以為前綴的函數(shù)方法,也可以直接導(dǎo)入使用。在瀏覽器中神秘丟失嘗試檢查被請求的是否存在尾部斜線,具體原因暫時沒有找到相關(guān)資料。 寫在前面 最近沒怎么寫新的東西,一是因為一直在準(zhǔn)備換新的工作,所以一直在準(zhǔn)備面試,二是因為過年,心靜不下來,所以也無法輸出或者翻譯一些文章,三是由于手頭還有一些遺留工作需要完成和交接,比...
摘要:輸出下標(biāo)和對應(yīng)的元素集合集合是無序的,集合中的元素是唯一的,集合一般用于元組或者列表中的元素去重。 python內(nèi)置的數(shù)據(jù)類型 showImg(https://segmentfault.com/img/bVbrz1j); Python3.7內(nèi)置的關(guān)鍵字 [False, None, True, and, as, assert, async, await, break, class, co...
摘要:原文前面可以說是弄了一系列的和多進(jìn)程的一大坨內(nèi)容,知識淺顯代碼粗暴風(fēng)格簡陋,總的說來,還是差了一些細(xì)節(jié)。今天,就一些漏掉的細(xì)節(jié)補充一下。最后,我補充一句是同步的,而不是異步。 原文:https://t.ti-node.com/thread/... 前面可以說是弄了一系列的php socket和多進(jìn)程的一大坨內(nèi)容,知識淺顯、代碼粗暴、風(fēng)格簡陋,總的說來,還是差了一些細(xì)節(jié)。今天,就一些漏...
摘要:一掛在上的上最常用的只有其中,永遠(yuǎn)都是窗口的大小,跟隨窗口變化而變化。這個是距該元素最近的不為的祖先元素,如果沒有則指向元素。 在Javascript的開發(fā)過程中,我們總會看到類似如下的邊界條件判斷(懶加載): const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...
閱讀 2781·2021-10-14 09:42
閱讀 838·2021-10-11 10:57
閱讀 785·2019-08-30 15:54
閱讀 1927·2019-08-30 13:50
閱讀 1693·2019-08-30 11:19
閱讀 943·2019-08-29 12:38
閱讀 1435·2019-08-26 11:51
閱讀 1401·2019-08-26 10:48