標籤: css

CSS 寬度計算使用 calc()

CSS 有個蠻常用得功能，就是設定寬度後，往左漂移(float)排列(現在可以使用 flex 等等)

若以前使用 width + float 後，想要將內容置中，就是一件很麻煩的事情，但是 width 有些算法就是無法整除，右邊就會有些空白出現，要怎麼辦呢？

閱讀全文〈CSS 寬度計算使用 calc()〉

XSS Cheatsheet - 2021

以前有整理過各種 XSS 和安全性的文章，詳可見：

XSS 的防範要做完太難了，來看看 2021 又有哪些新要注意的地方~

閱讀全文〈XSS Cheatsheet - 2021〉

前端 Tooltip 一步一步教學的工具套件

網頁、App 常常都會有頁面介紹，會將頁面區塊框一個框框，然後旁邊秀出說明或者教學。

這些通常會在 HTML 元素旁邊，使用 tooltip 的方式秀出來，這次介紹的套件，就是秀出來外，加上循環順序的設定，就可以做出一步一步的教學等效果。

閱讀全文〈前端 Tooltip 一步一步教學的工具套件〉

好站：CSS Grid Layout 產生器

網頁的 CSS 部份，通常最麻煩的就是 Grid 的架構部份，以前常常會需要靠 float，現在 CSS 有很多新的語法可以用，主要是靠 display 的屬性來達成。

此網站提供 CSS Grid 的界面產生器，可以在頁面上點選，最後就可以生成需要 Grid 格式的 CSS、HTML 語法。

簡易的 jQuery CSS Selector 替代寫法

在 DK 的 Blog  看到此技巧：簡易的 jQuery CSS Selector 替代品

jQuery 的寫法 $(...) 簡短也好記，JavaScript 原生想要用類似的寫法，只需要一行即可達成。

const $ = document.querySelector.bind(document);

註：上述方式並非 fluent interface，無法像 jQuery 持續串接下去

範例

const $ = document.querySelector.bind(document);
$('ul').style.color = "red";

取自