Tag Archives: css

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

Posted on September 4, 2016 by Gea-Suan Lin

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+ … Continue reading →

Posted in AWS, CDN, Cloud, Computer, Murmuring, Network, WWW | Tagged , , , , , , , , , , , , , , | Leave a comment

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

Posted on May 31, 2016 by Gea-Suan Lin

在「You Don't Need JavaScript for That!」這邊看到好多讓人懷念的技巧，用純 css 做到很多動態效果 (現在 browser 對 css 的支援比以前好很多，這些技巧應該都沒問題了)： Tooltips Dropdown menu Toggle Visibility 以前前端的人會講 accessibility，不過現在好像沒 javascript 就沒人權了...

Posted in Browser, Computer, CSS, Murmuring, Network, Programming, Software, WWW | Tagged , , , | Leave a comment

簡易的 jQuery CSS Selector 替代品

Posted on May 18, 2016 by Gea-Suan Lin

在追 refined-twitter 程式碼的時候，在「refined-twitter/extension/content.js」這邊看到： const $ = document.querySelector.bind(document); 這樣就可以拿 CSS Selector 掃出元件，程式變得比較好讀... 當然，這個方式不是 fluent interface，沒辦法再依樣串下去。 用 Google 查了一些資料，看起來至少從 2013 年就有這個技巧了。

Posted in Computer, CSS, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , | 1 Comment

關於 CSS 中 :visited 的隱私問題

Posted on February 15, 2016 by Gea-Suan Lin

在七年半前 (2008 年八月) 寫的「利用 CSS 產生的隱私問題」文章，最近好像是因為 Rplus Chen 在 Facebook 上的這邊提到而又有不少點擊進來，不過這個問題在 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 … Continue reading →

Posted in Browser, Computer, CSS, Murmuring, Network, Security, Software, WWW | Tagged , , , , , , , , , | 1 Comment

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

Posted on January 31, 2016 by Gea-Suan Lin

好幾個禮拜前的東西，這幾天才上 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 … Continue reading →

Posted in Computer, CSS, Murmuring, Network, Political, Programming, WWW | Tagged , , , , , , , , , | Leave a comment

在 Gmail 上做 CSS 效果的問題

Posted on November 18, 2015 by Gea-Suan Lin

在 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 … Continue reading →

Posted in Computer, CSS, Mail, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , | Leave a comment

用 CSS 比較兩張圖片的差異...

Posted on October 4, 2015 by Gea-Suan Lin

老文章但上了 Hacker News：「Image diffing using CSS」。 於是本來這樣的兩張圖： 在經過 -webkit-filter: invert(100%) opacity(50%); 的疊合下變成：(這邊就直接抓圖了)

Posted in Computer, CSS, Murmuring, Network, WWW | Tagged , , , , , , | Leave a comment

更新 Twitter Expand Preview Image 樣式...

Posted on July 14, 2015 by Gea-Suan Lin

在「預設展開 Twitter 圖片的 Userstyle」這邊利用 CSS 效果展開圖片，這次更新把多張圖片的縮圖也展開了：「Twitter Expand Preview Image」。 連帶的，本來有裝「Photo Zoom for Twitter」就順便移除了... 這次學到 unset 這個屬性：「unset - CSS | MDN」，現在 Google Chrome 也才 43，也就是在 Google Chrome 上是兩個版本前的 41 才支援的...

Posted in Browser, Computer, CSS, Firefox, GoogleChrome, Murmuring, Network, Photo, Recreation, Social, Software, WWW | Tagged , , , , , , , , , , | Leave a comment

預設展開 Twitter 圖片的 Userstyle

Posted on July 6, 2015 by Gea-Suan Lin

在 Twitter 上遇到比較大張的圖片要自己展開，之前在 Google Chrome 上面是用 Previeweet 解決，但這個套件已經年久失修... 研究了 Twitter 的 CSS 結構，看起來可以用 Stylish 處理掉，就寫了一個 style 上傳上去：「Twitter Expand Preview Image」。 這樣看圖片方便多了...

Posted in Browser, Computer, CSS, Firefox, GoogleChrome, Murmuring, Network, Programming, Software, WWW | Tagged , , , , , , , | 1 Comment

利用 data attribute 與 attr() 的 Pure CSS Responsive Table

Posted on April 20, 2015 by Gea-Suan Lin

查了 MDN 的說明，原來 attr() 在 IE8 就可以用了... 在這篇文章看到純 CSS 的 Responsive Table 技巧：「Responsive Tables in Pure CSS」，目標是把這樣的表格： 在寬度較小時自動變成這樣的形式： 用了 data attribute 與 attr()，再加上 before pseudo element。

Posted in Computer, CSS, Murmuring, Network, Programming, WWW | Tagged , , , , , , | Leave a comment