.multiline-ellipsis { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */ white-space: pre-wrap; /* let the text wrap preserving spaces */ } refer - Easiest Way to Truncate Text With Ellipsis in CSS
...
Category: Css
mobile web 會在點擊 a link 的時候 highlight 那個部分
原意是為了讓使用者更能夠直觀地知道是否有點擊了那個東西
但是有時這個樣式會和整體 web 的設計不合
所以會想辦法改變或關掉這個 highlight
那就得使用一個 CSS 屬性 -webkit-tap-highlight-color
如果要關掉, 那就改成透明的
-webkit-tap-highlight-color: transparent; 如果要改成別的顏色就設定顏色即可
-webkit-tap-highlight-color: red; -webkit-tap-highlight-color MDN
...
# CSS - content property use special char If you want use special char like © in CSS content property
You must use ASCII and show on HEX
And it is ©
So CSS need
div;before { content: "\00A9"; } Entity Conversion Calculator
This page can help us trans to hex
Refer - CSS Content | CSS-Tricks
...
# JavaScript - get CSS style Sometimes i want to use JavaScript get dom CSS style.
Use DOM.currentStyle and window.getComputedStyle(DOM)
For IE use DOM.currentStyle
Other use window.getComputedStyle(DOM)
var dom = document.getElementById("target"), style = dom.currentStyle || window.getComputedStyle(dom); console.log(style.marginTop); refer - Window.getComputedStyle() - Web APIs | MDN
refer - currentStyle object (Internet Explorer)
...
# CSS4 - 關於 css4 and postcss 的一些想法 ## 前言 在年末才來發這篇文…
在今年大家開始瘋 react(咦? AngularJS 勒…), Babel, postcss
好像沒聽過上述這幾個詞就沒法自稱前端工程師(還好我現在都自稱打字員)
到了最近才有空閒研究 postcss 到底在做啥
一開始聽說可以無痛接軌未來(welcome to feature), 不像 Sass 未來如果要轉換就不好轉換(其實見仁見智啦)
聽起來好潮喔, 但很忙沒時間搭理它
而且這年頭的 tool 都越來越多步驟和許多工具要搞, 除非靜下心來專心研究, 不然哪有時間搞啊(感覺像是逃避的藉口…)
直到了最近自己有些小東西要改, 需要用到變數的功能, 就想到 CSS4 不是有大家夢寐以求的 var() 功能嗎(感覺潮潮的)
就花了點時間研究一下 postcss 這在 github 的專案
一看下去不得了, 包山包海一卡車功能, 還包含了之前聽別人介紹的連 Sass 的部分寫法的功能都有…
看完的瞬間想翻桌, 只是要寫個 CSS, RD 何苦為難 RD 呢, 我不需要那麼多功能啊~
還好有仔細看到主要 CSS4[註] 是用 cssnext 這專案來處理(網站還用回到未來的梗…)
所以我就果斷使用 cssnext 就好了(我真的很討厭用一套工具還要裝許多套件, 然後有的套件還不一定是你需要的不然就是有套件的部分功能是重複的…)
## gulpfile 設定 現在有一大堆 build tool 像是 grunt, gulp, browserify, webpack 等工具
...
# PHP - Auto update static files cache We can cache static files(CSS, JavaScript) to client
When Server update static code.
We want to update cache then we can modify file or add query string update version.
We have some choice like modify url ?v=1 to ?v=2
But I want to auto modify version.
This is a way i use
<?php function autoversion($url) { $ver = stat($_SERVER['DOCUMENT_ROOT'] . $url)[mtime]; return $url .
...
# CSS - web font Use our font
Put your font file on your server.
Default font can’t cross domain used.
Suggest use OTF or TTF format.
@font-face { font-family: playstation; src: url(TRIIYP.otf); } @font-face { font-family: sony; src: url(sony.TTF); } ## Fonts SONY’s Logo Font Download
Free ps4 fonts - FontSpace
## Demo ps4
Refer - CSS3 Web Fonts
...
# CSS3 - object-fit We can use CSS3 property object-fit handle image show area and fit it.
But only IE no support.
Example
See the Pen img object-fit by Ted (@tedshd) on CodePen.
Refer - object-fit Refer - object-fit
...
# CSS - Modify Pseudo Element Content 之前遇到個問題就是偽元素的內容(content)到底可不可以修改, 於是就求助於 Google
最後的答案是可以的, 而且還不少方法
Refer - Modify pseudo element styles with JavaScript
看下來就以下的方式個人覺得最好用
#red::before { content: attr(data-attr); color: red; } <p id="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p> setTimeout(function (argument) { document.querySelector('#red').setAttribute('data-attr', 'green'); }, 3000);
...
# JavaScript - Detect CSS3 transitionEnd transitionend
It is a event can fired when CSS3 transition end.
function transitionEnd() { var el = document.createElement('div'), //what the hack is bootstrap transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' }; for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return transEndEventNames[name]; } } return false; // explicit for ie8 ( ._.) } // Usage document.
...