Tag Archives: css

Trac 的 button 有時候按下去不會生效的問題...

Trac 時常遇到的問題之一:

當 button 按的「不夠中間」的時候就不會有效。原因是按下去後會觸發物件偏移,如果你按到比較邊邊的地方就會失效:

input[type=button]:active, input[type=submit]:active,
input[type=reset]:active {
 position: relative;
 top: .1em;
 left: .1em;
}

解法就是在 template 加上:

input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
    top: 0;
    left: 0;
}

讓他不要亂跑就沒事了...

uBlock Origin 支援的 :has()

查資料的時候發現 uBlock Origin 的「Static filter syntax」已經自己實作 :has() 了 (雖然有一些限制)。

這個 CSS4 (draft) 的特性目前還沒有瀏覽器支援,所以 uBlock Origin 決定自己來:

This is a planned CSS4 operator, but no browser supports it yet. I decided to go ahead and implement it so that it can already be used. See The Relational Pseudo-class: :has() in the Selector Level 4/Editor's Draft.

由於效能問題,要求一定要有 hostname,而不能是 global rule:

uBO's implementation is simplified so as to ensure performance. The :has operator must be used with at least one hostname (it must be specific), and must be of the form (example)[.]

這對於 html block 長的幾乎一樣,只有在某個地方多出 Promoted by ... 之類的結構處理起來很方便,可以拿來找出「裡面有廣告 div 的母體 div」然後整包處理掉... (你不會只想要拿掉 Promoted by ...,而是連廣告內容都拿掉)

CloudFront 支援將 Query String 內的特定 Key/Value 當作 Cache Key 的一部分

Amazon CloudFront 可以指定 query string 中的某個特定的 key/value 當做 cache key 的一部分了:「Announcing Query String Whitelisting for Amazon CloudFront」,對應的文件在「Configuring CloudFront to Cache Based on Query String Parameters」這邊可以查到。

先前只能針對選擇忽略掉整個 query string,或是把整個 query string 當作 cache key 的一部分,現在可以細部調整了。

最簡單的應用可以用在 css/js 的 asset 上,針對 v=\d+ 當作 cache key 的一部分,而其他的參數可以忽略,不過這好像沒什麼特別的意義。

目前想到比較有意義的應用是針對 dynamic content 多了一些籌碼可以用,像是 Slack 把整個網站放上 CloudFront 後,應該會有很多 API 是透過 query string 傳遞參數,而這次的改變讓 CloudFront 可以細部調整。

在這個純 CSS 技巧被遺忘的年代,許多可以用 CSS 就做到的效果...

在「You Don't Need JavaScript for That!」這邊看到好多讓人懷念的技巧,用純 css 做到很多動態效果 (現在 browser 對 css 的支援比以前好很多,這些技巧應該都沒問題了):

  • Tooltips
  • Dropdown menu
  • Toggle Visibility

以前前端的人會講 accessibility,不過現在好像沒 javascript 就沒人權了...

簡易的 jQuery CSS Selector 替代品

在追 refined-twitter 程式碼的時候,在「refined-twitter/extension/content.js」這邊看到:

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

這樣就可以拿 CSS Selector 掃出元件,程式變得比較好讀... 當然,這個方式不是 fluent interface,沒辦法再依樣串下去。

Google 查了一些資料,看起來至少從 2013 年就有這個技巧了。

關於 CSS 中 :visited 的隱私問題

在七年半前 (2008 年八月) 寫的「利用 CSS 產生的隱私問題」文章,最近好像是因為 Rplus ChenFacebook 上的這邊提到而又有不少點擊進來,不過這個問題在 2010 年左右已經被解決了。

可以參考 MDN 上「:visited - CSS」的說明,以及當時 Mozilla 所發佈的文章:「privacy-related changes coming to CSS :visited」。

由於隱私問題,Mozilla 的作法是限制 :visited 可以改變的項目,只剩下少數與呈現方式有關的屬性可以用:

For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke.

另外各種想要取得 :visited 的 CSS 資訊的方法,也會以沒有瀏覽過該網站重新計算,並且傳回假資料以確保還是不會洩漏:

The first change is that Gecko will lie to web applications under certain circumstances. In particular, getComputedStyle() and similar functions such as element.querySelector() always return values indicating that a user has never visited any of the links on a page.

18F 丟出 CSS 的代碼風格指南

好幾個禮拜前的東西,這幾天才上 Hacker News:「Introducing the CSS coding style guide」。

18F 是美國政府的官方單位,取名自辦公室所在的地址:(取自 Wikipedia 的「18F」說明)

Its name refers to its office location in northwest Washington, D.C., on 18th and F Streets.

不只是定義了 CSS Coding Style Guide,還給了 SCSS Lint 工具使用:

The styleguide provides a method of linting Sass (SCSS) code to ensure it conforms to the rules in the styleguide.

在 Gmail 上做 CSS 效果的問題

TechCrunch 上看到的「Gmail, We Need To Talk」這篇裡提到 Gmail 的問題,尤其是 CSS 這塊:

Each Gmail client renders email differently. You may not be aware of this, but each Gmail client has its own set of frustrating quirks. Having to deal with each version of Gmail makes creating email a nail-biting chore:

  • Gmail.com Webmail. Supports <style> but does not support ids and classes.
  • Gmail Webmail for Business. Does not support <style>.
  • Gmail App for iOS. Randomly increases font sizes by 50 percent (no <style>).
  • Gmail App for Android. Randomly ignores container widths (no <style>).
  • Gmail App for Android (for non Gmail.com addresses). Does not support background images in addition to ignoring container widths (no <style>).
  • Inbox by Gmail for Android. Randomly ignores container widths but does so differently than Gmail App for Android (no <style>).
  • Inbox by Gmail for iOS. Does not support <style> but seems to not suffer from as many quirks as other Gmail mobile apps.

這也就可以理解為什麼有時候手機上看起來怪怪的了 XD

更新 Twitter Expand Preview Image 樣式...

在「預設展開 Twitter 圖片的 Userstyle」這邊利用 CSS 效果展開圖片,這次更新把多張圖片的縮圖也展開了:「Twitter Expand Preview Image」。

連帶的,本來有裝「Photo Zoom for Twitter」就順便移除了...

這次學到 unset 這個屬性:「unset - CSS | MDN」,現在 Google Chrome 也才 43,也就是在 Google Chrome 上是兩個版本前的 41 才支援的...