Also, http://www.w3schools.com/cssref/css_selectors.asp for details
Voi ce combinatii interesante/utile aveti, pe care le puteti share-ui cu restul forumului?
1 Like
Eu unul încerc să evit selectorii ce impun o anumită ordine în HTML. A fost o vreme în care încercam să folosesc cât mai puține clase în HTML, dar mereu aveam probleme când un client (sau programator) încerca să mute ceva în altă parte. De când am auzit prima dată de BEM/OOCSS/SMACSS am schimbat destul de mult modul în care produc HTML.
Selectori mai speciali folosiți frecvent de mine:
-
last-childsaufirst-child, pentru situații de genul:
p { margin-bottom: 1em }
p:last-child { margin-bottom: 0 }
-
:beforesau:after, de cele mai multe ori pentru icons; - extrem de ocazional, selectorii de atribute
[data-foo*="bar"]
Și cam atât, nu cred că am uitat ceva.
1 Like
Ca un exemplu de folosire a sellectorilor, uitati un sistem de tab-uri (in webpage) implementat doar cu css:
Și vine clientul și îți zice: „m-am răzgândit, vreau tab-urile să fie jos, contentul sus. Cum procedezi?
1 Like
Buna intrebare… trebuie sa fac umpic de research…
Dacă tot faci umpic de research, vezi poate găsești și o modalitate să faci astfel încât pe responsive să se transforme tab-urile într-un dropdown iar la swipe pe content să se schimbe tab-urile. 
Demo-urile de codepen sunt bune doar să te dai mare și tare, că uite ce poți face cu CSS. În producție însă, o să vezi că poți folosi astfel de giumbușlucuri foarte rar (spre deloc).
3 Likes
Si exact acesta este motivul pentru care am postat aici: realistic feedback. Multumesc!
Un @media rezolva problema cu dropdown.
Te provoc să faci un dropdown cu @media 
(ca să nu zic și de faptul că CSS-ul tău știe de ce se întâmplă în HTML (e.g. #tab1:checked ~ label[for=tab1]).
Ok, I’m lost…
Aparent, ce-am facut eu acolo este doar un hack… si cand incerc sa schimb chestii, se duce pe apa sambetei… trebuie sa refac tot de la 0…
Ok, am ajuns la acest stadiu, doar ca nu reusesc sa fac doar din css nici acel dropdown, nici sa mut meniul jos, fiindca nu stiu de existenta unui selector gen ~ dar care sa mearga si in sus (adica oriunde ar fi, in pagina), fara JS… dropdown e relativ usor de facut, cred eu. un &:target, &:active, &:focus, &:hover pe un element anterior, adaug un element vu displey:none cand dimen
Ceva ajutor, va rog?
Edit: Am o idee… Flexbox!
Edit2: Poate reusesc un hack cu :root
Edit:3 :root este un proxy pentru html …
Ai sintetizat foarte bine, dar nu înțelegi că tocmai asta e problema:
1 Like
[/quote]
Asta e problema cu CSS in general… Nu a fost gandit pentru a fi folosit asa cum este. Si. din pacate, nici o alternativa capabila nu reuseste sa se impuna… AXR parea o alternativa decenta, but it died off…
Edit: I got a lead on the :partent alternative, .module:has(span)…
Edit2: Nope, that only works with jQuerry…
Edit3: Source of the quote…
So my point is - CSS is always about how can you best describe the hierarchy of a page. It’s up to the browser to worry about performance, and PageSpeed, although a nice tool, always yells at me for very generic uses. The amount of work it would take to add classes to very element I might use is simply non realistic.
Edit4: Source of the quote…
Does it matter that it doesn’t follow the “normal” CSS syntax style? I don’t think it does. It still cascades, it would still have a specificity weight and I think it’s long overdue - as per my post: http://remysharp.com/css-parent-selector/
In which is said:
The difference between E:has(s) and E:parent is that :parent is reference the parentNode which is one particular element. Once the element E is found in the DOM it would then just refer to it’s parent and apply the style.
Source of the quote…
perhaps taking the concept of “:has()” and splitting it into “:has-child()” and “:has-descendant()”. Or maybe “:parent-of()” and “:ancestor-of()” would read better?
Problema pe care o am este ca nu pot sa adaug label-urile intr-un alt element, deoarece stric #tab1:checked ~ label[for=tab1]… Odata rezolvata problema aceasta, cred ca pot gasi un hack pentru cealalta…
Nu sunt sigur că înțeleg în ce direcție te îndrepți.
Eu am zis mai sus că în producție (indiferent că-i site mare sau mic) astfel de selectori sunt inutili. Tu continui să sugerezi hack-uri, scopul lor fiind… nu sunt sigur care este scopul.
1 Like
Scopul lor este o intelegere mai buna a modului in care CSS-ul lucreaza…
Ok, ordinea am rezolvat-o. Fara hack-uri. Acum mai am de implementat inca un checkbox, pentru dropdown…
Sau vroiai meniul sa fie lipit de bottom (adica sticky footer)?
Thanks, Flexbox!
1 Like
merge si pe ie 8?
2 Likes
Probabil nu. Let me rephrase that: Sunt 99% sigur ca nu.
Edit: IE10 este prima versiune de IE care are suport (partial) pentru flexbox.
Sursa: http://caniuse.com/#search=flexbox
Edit2: Acum ma chinui sa fac sa mearga, acel checkbox, pentru meniul dropdown…
Edit4: It’s alive !!!
Alte provocari? (si nu, IE9 si versiunile anterioare nu primesc suport.)
Desigur. Fă-l să schimbe hash-ul paginii când se schimbă tab-ul
1 Like
[quote=“iamntz, post:18, topic:2397”]
să schimbe hash-ul paginii când se schimbă tab-ul
[/quote]Doar cu CSS? Pentru ca ma indoinesc ca este vre-o modalitate… But feel free to correct me if I’m wrong.
Edit: Ah, te referi la <a name="ceva"></a>…
Edit2: Acum ar trebui sa mearga…
Păi și dacă se schimbă hash-ul, după ce dai refresh se păstrează tab-ul selectat?
Cum faci numele tab-urilor să fie ceva mai semantice în hash? (e.g. să nu fie #tab1 ci #contact-us)
Dacă ai 30 tab-uri cum procedezi în CSS?
#tab1:checked ~ .contents > .tab1,
#tab2:checked ~ .contents > .tab2,
...
#tabN:checked ~ .contents > .tabN {
display: block;
}