Your SlideShare is downloading. ×
CSS: fine tuning - Tech Hangout #15 - 2013.02.27
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS: fine tuning - Tech Hangout #15 - 2013.02.27

143
views

Published on

Доклад Алексея Мирошко, который состоялся 27 февраля, пролил килотонну света на информацию о видах и принципах работы CSS-селекторов, их приоритетности, производительности, способах оптимизации и …

Доклад Алексея Мирошко, который состоялся 27 февраля, пролил килотонну света на информацию о видах и принципах работы CSS-селекторов, их приоритетности, производительности, способах оптимизации и других тонкостях, которые часто остаются вне зоны внимания многих веб-разработчиков.

* Tech Hangout – мероприятие, организованное разработчиками для разработчиков с целью обмена знаниями и опытом. Подобные встречи проводятся еженедельно по средам с 12:00 до 13:00 и охватывают исключительно инженерные темы. Формат данного ивента подразумевает под собой 30 минутный доклад на ранее определенную тему, и такую же по продолжительности дискуссию в формате круглого стола.
Если у вас есть неутомимое рвение к новым знаниям, профессиональному росту, или же вы хотите поделиться своим опытом - добро пожаловать в Hangout Club!

Присоединяйтесь к обсуждению - https://www.facebook.com/groups/techhangout/
Читайте нас на - http://hangout.innovecs.com/

Published in: Education, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
143
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Selectors* a:first-child#lake div#lists ul:first-child > li:last-child.sea p:only-childnav b:only-of-type#only p i:first-of-type#s:visited li:nth-child(4).last-item:hover a:nth-last-child(5)a.caption:link #catch .item:nth-of-type(1)*:hover + p.salty#cover .item.red:nth-last-of-type(9)ul#first-item > li tr:nth-child(2n)var ~ address tr:nth-child(3n+1)p[id] li:nth-of-type(odd)#sin[rel="next"] i:empty:afterimg.pink[title*="hot"] input:enableda[href^="https"] textarea:disabledimg[src$=".png"] div:targetul[class~="except"]input[type=radio]:checked,buttoninput[type=text]:hover.carousel:not(.long)p::first-line,li:first-line* > li::first-letter, i:first-letterli:before,li:after
  • 2. Priorities6. *5. a b:first-letter4. [href$=".html"] .testy a:visited3. #name_of_id2. style="margin:0;"1. !important * 0 0 0 0 0 1 1li 0 0 0 0 1 0 10li:first-line 0 0 0 0 2 0 20ul li 0 0 0 0 2 0 20ul > li 0 0 0 0 2 0 20 ul ol+li 0 0 0 0 3 0 30h1 + *[rel=up] 0 0 0 1 1 1 111ul ol li.red 0 0 0 1 3 0 130 li.red ul ol 0 0 0 1 3 0 130li.red.level 0 0 0 2 1 0 210#x34y 0 0 1 0 0 0 1000style="" 0 1 0 0 0 0 10000 1 2 3 4 5 6
  • 3. Performance 1. #header 2. .promo 3. div 4. h2 + p 5. li > ul 6. ul a 7. * 8. [type="text"] 9. a:hoverevery selector is parsed from the end to the beginbetter worse#big ul#big#all-links .link #all-links *.link li.linkp b .big-a p b.big a$(#big).find(a) $(#big a)$(.in).filter(p) $(p.in)$(#my).children(a) $(#my > a)the same is mostly applicable to jQuery selectors
  • 4. https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS
  • 5. https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS