• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS: fine tuning - Tech Hangout #15 - 2013.02.27
 

CSS: fine tuning - Tech Hangout #15 - 2013.02.27

on

  • 221 views

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

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

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

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

Statistics

Views

Total Views
221
Views on SlideShare
212
Embed Views
9

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 9

http://blog.innovecs.com 9

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS: fine tuning - Tech Hangout #15 - 2013.02.27 CSS: fine tuning - Tech Hangout #15 - 2013.02.27 Presentation Transcript

    • 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
    • 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
    • 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
    • https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS
    • https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS