CSS: fine tuning - Tech Hangout #15 - 2013.02.27

  • 129 views
Uploaded on

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

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

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

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

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
129
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
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