文章彙整

"前端開發"共有14篇文章

首頁  /  新知分享  /  網站設計與開發  /  前端開發

五個方法提升 Web Fonts 載入速度

微調 font 文件並進階優化字體載入策略,以實現最快速度和最短 FOUT 表現 在之前的文章我們介紹了關於 system fonts 相對於 web fonts 的優點,與 system fonts 相比,web fonts 會對效能產生負面影響,使用更多數據並且增加網頁耗能,更是對 Google SEO 排名造成間接性的傷害。

System Fonts 和 Web Fonts 比較

什麼是 System Fonts / Web Fonts?System Fonts 顧名思義指的是作業系統內定的字型,因為來自於作業系統(也就是用戶的電腦、手機),不需要去特定網站(如 Google)抓取字體文件,也不需要將字體文件存在我們的網頁伺服器裡。而 Web Fonts 則是儲存於網頁伺服器的字體文件,瀏覽器會在渲染畫面時下載當前網頁指定的字體。在一天之內,瀏覽各種網頁可能會下載成百上千個這樣的文件。 其中一些甚至可能是相同的字體,來自不同的網站。

前端開發:使用jQuery實作點擊div以外的地方來關閉它

在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能:點擊元件外部來關閉元件。在接下來的範例中,我們要示範如何使用jQuery實現點擊div以外的地方來關閉div。首先、我們先準備好html的部份,我們要做一個按鈕和一個div方塊。按下按鈕就可以顯示或隱藏div。並且在div顯示的狀態下,點擊div以外的地方就可以隱藏它。

Web Share API 網頁分享功能

Web Share API 是現代瀏覽器提供的功能之一,它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。以下我們分成三大主題來為各位介紹 Web Share API 的基本使用概念,什麼是 Web Share API呢?Web Share API 的限制是什麼呢?Web Share API 要如何使用?

前端開發:bootstrap-table.js的中文化設定

bootstrap-table.js 是一個以bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。這篇文章要簡單的介紹如何設定bootstrap-table.js的中文化呦!因為bootstrap-table.js是以bootstrap為基礎開發的套件,因為我們必須先載入bootstrap。另外bootstrap-table使用了font awesome作為預設的圖標,因此我們也需要找入font awesome.一起來看看吧!

Javascript 中 JSON.parse 數字支援問題

在javascript中我們常常使JSON格式做資料交換,所以我們常常使用JSON.parse來把字串轉為物件再做使用,但是有一個問題會造成你轉出來的資訊與你期望的產生差距,讓我們用一個簡單的範例來重現這個問題吧!那就繼續往下看囉!

前端開發:如何使用Javascript實現複製到剪貼簿的功能

這篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦!那就跟著以下操作教學,一起來試試吧!

前端開發:使用JQuery.qrcode來產生QR code吧!

jquery.qrcode.js 是純前端的jquery 外掛,可以輕鬆在網頁上生產QR code。整隻檔案不到3k。最小化之後更是只剩下1點多K。這篇文章要跟大家分享如何使用jquery.qrcode.js。

Sass Map的使用

本篇文章將來教大家關於Sass Map的應用,來提升工程師在開發與維護程式時的品質,跟著歐斯瑞手把手的教學,一起來看看吧。

CSS 預處理器 SASS、LESS 介紹

CSS 預處理器產生了一種新的語言,而核心理念是用一種專門的程式語言,為 CSS 增加一些程式設計的的特性,無需考慮瀏覽器的兼容性問題,例如可以在 CSS 中使用變量、簡單的邏輯程序、函數等等,讓開發者就只使用這種語言進行編碼工作。簡單來說,CSS 預處理器用一種專門的程式語言,進行 Web 頁面樣式設計,然後再透過編譯轉為正常的 CSS 文件。

前端開發:如何隱藏數字輸入框的小箭頭

又來到了歐斯瑞的前端開發教學系列,今天要與大家分享如何使用CSS隱藏數字輸入框的小箭頭,並附上codepen範例方便讀者們做使用,一起跟著我們來學習吧!

前端開發:使用bootstrap-table.js來實現表格的排序

bootstrap-table.js 是一個以為bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。本篇文章將簡單的介紹如果套用bootstrap-table.js到表格上,進行排序。