純 CSS 製作自適應 RWD 正方形，可隨容器寬度大小改變，自動調整容器高度，維持正方形比例，而正方形容器中一樣可以有內容，不受影響
HTML:
CSS:
example:
See the Pen
CSS RWD square 正方形 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square
[……]
分類: HTML
PHP json_encode sting in HTML input field
json_encode 輸出於 HTML input 發生異常
把PHP中的Array透過json_encode()轉換成Json格式輸出到HTML input value中如下：
輸出於 HTML 發生異常，只剩下左側「中括號」
主要原因是Json中的雙引號與HTML的雙引號打架
可以使用 htmlspecialchars() 簡單解決這問題
在執行 json_encode() 後再執行 htmlspecialchars() 如下方代碼
如此就正常輸出囉
https://stackoverflow.com/a/21887262
[……]
Social Network Service (SNS) Share Link
http://www.facebook.com/share.php?u=[URL]&t=[TITLE]&pic=[IMAGE]
http://twitter.com/intent/tweet?text=[TITLE]&url=[URL]&pic=[IMAGE]
Google Plus
https://plus.google.com/share?url=[URL]&t=[TITLE]
https://www.pinterest.com/pin/create/button/?url=[URL]&description=[TITLE]&media=[IMAGE]
https://www.linkedin.com/sharing/share-offsite/?url=[URL]&title=[TITLE]
Delicious
http://del.icio.us/post?url=[URL]&title=[TITLE]
Tumblr
http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]
Digg
http://digg.com/submit?phase=2&url=[URL]&title=[TITLE]
StumbleUpon
http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
http://reddit.com/submit?phase=2&url=[URL]&title=[TITLE]
新浪微博
http://v.t.sina.com.cn/share/share.php?title=[TITLE]+[URL]&pic=[IMAGE]
QQ 空间
http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=[URL]
人人网
http://share.renren.com/share/buttonshare.do?link=[URL]&title=[TITLE]
腾讯微博
http://v.t.qq.com/share/share.php?url=[URL]&title=[TITLE]
https://github.com/bradvin/social-share-urls
https://chon.io/notes/social-media-sharing-link-url/
[……]
HTML5 a tag force download
希望強制讓使用者下載檔案，但是在a標籤將網址指向檔案，在一些常用檔案例如：jpg、png、PDF，常會被瀏覽器直接開啟，無法直接下載，比較正規的做法是在發送 headers 時做這件事，但有時我們在處理靜態網頁就可以用偷吃步，在HTML5 a 標籤中多了一個download屬性，就可以用強制檔案用下載的方式讓使用者下載a標籤連結中的檔案，但這偷吃步要小心瀏覽器相容性
[……]
CSS ul li 水平對齊居中
使用 Flex
HTML
CSS
Example
See the Pen
CSS ul li Horizontal center – flex by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
https://wcc723.github.io/css/2017/07/21/css-flex/
[……]
CSS ul li 水平居中 only CSS
這是目前我認為最簡單的方法，最下方可以看到Example，特別加上一點特效
HTML
CSS
See the Pen
CSS ul li horizontal align center by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
Youtube embed iframe API loop/repeat not working
有效解決這問題，除了loop=1以外，要多加一個 playlist 參數playlist=VIDEO_ID ，這對我有效
參考資料：
https://developers.google.com/youtube/player_parameters#loop
https://stackoverflow.com/a/25781957/6784662
[……]
CSS 文字圓標教學
圓標是網頁表現手法很常見的一種方式，尤其電商，很常見用來突顯商品特價 產品 或新產品的標籤，以下介紹圓標的製作方式
HTML
先建立一個兩層結構的HTML如下，圓標文字包裹在內層div中
CSS
未方便辨識，先把兩個容器背景設為綠色及紅色的純色，這樣就能清楚了解容器範圍，並且先製作外層容器
接著用 CSS3.0 水平垂直居中的技巧，讓文字固定於正中間
再給文字添加一些樣式
透過顏色的區分，很容易看到兩個容器的關係，最後再慢慢調整文字及圓表尺寸顏色等樣式，以下是本教學的範例
完成樣子
See the Pen
文字圓標 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
[……]
CSS 選擇器，模糊查找匹配元素
CSS選擇器中沒有所謂的「萬用字元(*)」，可以透過一些方式接近模糊查詢方式，查找匹配屬性或值的元素
歸納出幾種用法
下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無
[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值
使用範例：
See the Pen
CSS 選擇器，模糊查找匹配元素 by VECTOR.cool (@ann71727)
on CodePen.
[……]
hide protected by reCAPTCHA v3
安裝 reCAPTCHA v3 之後，頁面右下角就會多出隱私權圖標這東西，在某些場合可能需要把它隱藏起來，可以透過下面方式隱藏
下方兩段CSS都可以隱藏 reCAPTCHA v3 圖示
注意：請不要使用 display: none 這可能會使reCAPTCHA v3失去作用
https://wordpress.org/support/topic/how-do-i-hide-recaptcha-v3-badge/
https://wordpress.org/support/topic/recaptcha-v3-badge-is-displayed-on-all-pages-not-only-form-pages/
[……]