標籤: 前端

HTML的錨點(anchor link)，只要在標籤中加入屬性id=a，再用連結href=#a 即可用連結的方式跳到頁面上的指定位置 但這效果是畫面直接閃到位置，若要平滑捲動，則需要額外使用jquery或其他javascript的方式達成

Google Chrome 在 75 版本原生支援lazyload(延遲載入)的功能並自動啟動 包含 lazy image loading 和 lazy iframe loading 使用方法: 在img或iframe加上loading="lazy"標籤即可 <img

Web Font的font-face在舊有存在的FOIT（Flash of Invisible Text）問題，會在字型檔讀取完畢前，畫面呈現一片空白的狀況，甚至有些老舊瀏覽器及未更新webview in app的手機端，空白後就直接停掉了，畫面上永遠不會有字的狀況。

關於favicon請見以下資訊 https://www.w3.org/2005/10/howto-favicon https://en.wikipedia.org/wiki/Favicon 由於近年各裝置端的變化，在此筆記一下作個整理。 尺吋表： 16 x 16 – Standard size

運用CSS generated contnet 在 body 之後產生一些不會顯示的內容, 利用這個功能載入所需的圖檔 不用任何javascripts或外掛的巧秒技巧 body:after { content: url(img01.jpg) url(img02.jpg)

這是個分秒必爭的時代 記得有個數據顯示，普偏人對網頁等待的門檻是2秒鐘， 平均若是超過2秒有不好的體驗（例如2秒仍是空白），就會直接關閉離開， 另外如果網頁的反應太慢，操作LAG的話，也會大大的提高離開率 影響到UX使用者體驗的網頁速度，主要分為兩種指標 1.讀取速度 - 流量2.處理速度 -

鎖瀏覽器右鍵 這種防君子不防小人的東西到底還有什麼用呢 沒用 網頁這種東西，基本上只要看的到，代表拿的到， 百分之百保護的方法到底有沒有，我也還在找XDDD 在找到理想的網頁加密方案前，還是加減用一下... 今天就介紹支援度比較高的防複製鎖右鍵的簡單語法... --summary--

使用bootstrap通常是為了他的RWD 偏偏在行動裝置上，v2版本有個bug不知為何沒修正就往v3發展了 害我不能用官方的CDN來省流量 以下是修補Navbar選單裡的Dropdown， 在行動裝置上點擊會失效的問題 --summary--

想達到全螢幕的背景圖 並且還要隨著視窗的大小跟著縮放～ 可以利用CSS來達成 而不同瀏覽器支援也有差別 以下範例為CSS2及CSS3的寫法 兩個摻在一起是不是更相容呢？其實我也不知道XD 所以僅供參考 --summary--

在以前UX的工作是由企劃人員為主導 有時會混在設計甚至程式人員之中 獨立出來的好處是更專業 （也可說是網站企劃比較專業的稱呼） 而UX在前期非常重要， 但相對的，需承擔決策者成敗的最大責任 --summary-- 圖片轉貼來源：

平時還是最習慣使用噗浪 因為時間河道的概念沒有被搞爛掉 看那精美的facebook，永遠不讓你依時間順序看， 總是一直改規則，付費的廣告商才能排前面～ 本末倒置了資訊流的概念... **2014.06噗浪改版後已失效** --summary--

如何讓你的網站 在iPhone/iPad/Android手機平板時所加入的Favicon書籤icon 顯示成行動版大圖示呢？ 而不是小小的16x16的ico檔呢？ --summary--