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