CSSに死を！これはJSerの叫び！ #kbkz_techCSSの問題 セレクター設計が辛い 特に大規模化する場合、「CSSの問題」===「セレクターの問題」と言っていい （それ以外にもあるけど、大規模化するとほぼ確実にセレクターは問題になる） なぜ大規模化するとセレクターが辛くなるのか 「隠蔽ができない」 サイト全体で使用しているグローバル変数に対する定義を書いているようなもの
CSS Performance Tooling
Presented at CSSConf.eu, September 2014. Video: https://www.youtube.com/watch?v=FEs2jgZBaQA You've learned the concepts, now meet the tools. High-performance sites need to feel instant and deliver the goods in < 1000ms. In this talk, learn about the bleeding edge tools that can automate keeping your CSS on the fast path. Automate generating critical-path CSS, removing unused CSS, discovering dupli
WAH LAU! CSS CAN BE TESTED TOO!
This is a talk presented on 18 May 2012 at RedDotRubyConf, SG. ----- Your stylesheets are always in a mess. How can you fix this? The answer: TEST YOUR CSS! Then you will be able to refactor your CSS with confidence! Also presenting a Proof of Concept CSS Testing Framework, Cactus, which I have created - http://www.github.com/winston/cactus.
BEM it!
The document discusses the BEM (Block, Element, Modifier) methodology for organizing CSS, HTML, and JavaScript code. It describes BEM as a system that defines three basic entities - Blocks, Elements, and Modifiers - to structure user interfaces and components. Blocks are standalone parts of the interface, Elements are integral parts of Blocks, and Modifiers define properties or states. The documen
Selectors: Select This!
selectorA { property1: value1; property2: value2; } selectorB { property1: value3; property2: value4; } selector:pseudo-class::pseudo-element { -vendor-property: value; } selector[attribute], selector ~ relation { property: -vendor-value; -vendor-property: -vendor-value; -vendor-property: weirdsyntax; } <ul> <li id="myID" class="myClass">item 1</li> <li class="myClass">item 2</li> <li>item 3</li>
More CSS Secrets: Another 10 things you may not know about CSS
background: linear-gradient(white 30%, hsla(0,0%,100%,0)), linear-gradient(hsla(0,0%,100%,0), white 70%) bottom, radial-gradient(at top, rgba(0,0,0,.2), transparent 70%), radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom; background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; background-attach
Performance
Sorry; your browser does not support svg! Sorry; your browser does not support svg! http://www.meetup.com/framsia/ < 100ms "0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result." Jakob Nielsen
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSI: CSS Investigation
CSS JIT: Optimizing CSS Selector Matching with Just-in-Time Compilation
CSS shrinkage
ちゃんとCSSを書くために - CSS/Sass設計の話
大規模サイトにおける本当は怖いCSSの話
Automated CSS testing