computer:web:css
這是本文件的舊版!
目錄表
CSS
CSSOM
Media Query
- MatchMedia (JS Side)
-
Color
Variable
Mixin
Mathematical Expressions
Cursor
Outline
:focus:not(:focus-visible) { outline: none }
Border
Selectors
Pseudo Elements
- The escape notation
\a
in a CSS string literal indicates a line break character.
::before { content: 'Figure \a' attr(title) ' '; white-space: pre-line; }
Text
Font
Table
Form
List
Display
Float
Z-Index
Flexbox
Box Sizing
Grid
Shapes
Shadow
-
- Bottom only
box-shadow: 0 4px 2px -2px gray;
Overflow
-webkit-overflow-scrolling: touch;
Mask
Background
Gradient
- use
rgba(255,255,255,0)
instead of
transparent
in linear-gradient for Firefox and Safari
Animation
Transition
Tool
Transform
Effect
Matrix
Image
Filter
Directional
3D
Interaction
Performance
資源
示範
教學
守則
輔助程式
-
-
-
-
-
- csscss (Redundancy Analyzer)
-
- Juice (Inline to HTML)
- Knyle Style Sheets (Guideline Writing)
- StyleDocco (Style guide documents)
- Kalei (Living style guide)
-
-
-
Framework
Grid
Flexbox
便利工具
- Holmes (Diagnostic)
- Vogue (Auto Reload)
- Ffffallback (Font Fallback)
- Needle (Test)
Consistency
Analysis
Prettifier
Optimize
Quality
Sprites
樣板大觀
Hack
IE
width: 480px; /*ne-IE explorery*/ _width: 480px; /*IE 5.x*/ _w\idth: 460px; /*IE 6*/
IE8
content: attr(title);
必須在網頁裡已經有title這個attribute存在才會生效。
- 讓input變透明必須用
filter: alpha(opacity=0);
Firefox
- Firefox 的 hidden 表單元素會莫名奇妙填上框線,這是個修正方法
input[type=hidden] { visibility: hidden; }
- input and button height not consistent
::-moz-focus-inner { border: 0; padding: 0; }
Webkit
body {-webkit-user-modify:read-write}
Safari
- :hover works on iOS if the element has onmouseover like onmouseover=”“
- CSS fix for 100vh in mobile WebKit (-webkit-fill-available)
技巧
載入
定位
- 定位物件浮起來的位置:
上一層的物件使用position:relative,要浮起來的物件則使用position:absolute,
就能使這層物件的定位基準點以上一層為準而浮起來。
版面
工具
文件
清理
應用
- Style Switcher
http://www.alistapart.com/articles/alternate/ - Professional drop line menu
http://www.cssplay.co.uk/menus/pro_dropline - Multiple Remote Linking
http://css-tricks.com/multiple-remote-linking-an-example-and-how-to/ - Clean Tab Bar Digg-like using CSS
http://woork.blogspot.com/2008/03/clean-tab-bar-digg-like-using-css.html -
-
Color
Image
Banner
Gallery
Slideshow
Button
Menu
Pager
Hover
Form
Search
Background
Tooltip
List
Effect
computer/web/css.1635947550.txt.gz · 上一次變更: 2021/11/03 13:52 由 wm
