Cross-browser proprietăți de compatibilitate scrollbar

Vreau să rețineți că proprietățile CSS scrollbar de familie este o extensie a caietului de sarcini CSS2, introdus de Microsoft, și implementat în Internet Explorer începând cu versiunea IE 5.5, respectiv, alte browsere, la acel moment, ignorat complet această proprietate. Dar pe măsură ce timpul a trecut și multe browsere au început să se adapteze la acest add-on la specificațiile Microsoft.

Cu toate acestea, până în prezent, nu este atat de buna! Așa că stilul de bare de defilare sau ignorate în mai multe browsere sau rularea nu este în întregime corectă. de exemplu, multe ignora această proprietate pentru o etichetă sau nu înțeleg unele dintre proprietățile individuale ale bara de derulare.

Mai jos sunt câteva sfaturi pentru a vă ajuta să puteți rezolva această problemă în diferite browsere. Folosește cuvântul „probabil“, deoarece este foarte dificil de a urmări dinamica a tuturor modificărilor de browsere diferite. Lumea merge mai departe în fiecare zi, aici sau acolo, ceva se schimbă! Este păcat că compatibilitatea cross-browser-ul este întotdeauna dureri de cap!

Dar ce am vorbit. Astfel, numărul de „pastile“:

1. Dacă este posibil, utilizați un titlu aici :

2. Precizați proprietățile, nu numai că bara de defilare pentru tag-ul dar, de asemenea, pentru a eticheta

html, corp scrollbar-3dlight-culoare: #ffebcd;
scrollbar-săgeată-culoare: #FFFFFF;
>

3. Încercați-l, dacă este mai puțin eficientă pentru site-ul dvs., să pună în aplicare stilurile scrollbar folosind atributul style. în loc de aceeași etichetă de nume în „cap“ al documentului sau fișierul css extern

Poate că aceste recomandări vor lucra în unele browsere, în orice caz, IE (incepand cu versiunea 5.5), totul va funcționa corect, și dacă cel puțin undeva la locul de muncă este deja bine!

· Având în vedere că este una dintre bara de derulare importante elemente ale interfeței, încercați să nu pentru a ghida utilizatorul în eroare, folosind un design absolut non-standard a barei de defilare.

· Dacă ai făcut doar absolut necesar scrollbar personalizate, nu numai o culoare personalizată, și este forma non-standard, și, de asemenea, să lucreze în toate browserele folosind script-uri, dar nu uita despre primul sfat !!

· În browser-ul dvs., aspectul barei de defilare este desenată din setările Windows și astfel pentru mine, ea are un aspect de genul:

Dar, de îndată ce aplicați o bară de derulare scrollbar orice proprietate a familiei. conectarea la setările Windows vor fi pierdute, sau mai degrabă va fi „implicit“, iar aspectul banda dobândi astfel:

Aici este o listă a tuturor Pseudo:

· Hover - elemente de stil care a indus la șoarece.

· Activ - Stil pentru link-ul care este activă, dar trecerea pe ea nu a fost încă comis.

· Vizitat - Stil pentru link-urile vizitate cel mai recent.

· Link - Stil pentru link-urile vizitate rar.

· Focus - elementul Tema focalizat.

· Primul copil - Stil primul copil.

· Lang - Identifică limba utilizată în fragmentul de document.

Pentru fiecare pseudo-clase, vom vorbi mai jos, separat, iar acum câteva cuvinte despre sintaxa.

Pentru a aplica acest lucru sau că la elementul pseudo și să definească stilul său trebuie să respecte următoarele reguli de sintaxă:

Și toată această înregistrare, împreună va vorbi despre faptul că, atunci când mutați cursorul pe un link - se va transforma roșu.

Deci, de fapt, am ajuns la primul, cel mai popular, pseudo-clasa de planare.

După cum ați ghicit, probabil, treceți cu pseudo-activat în cazul în care cursorul este pe element.

Ei bine, din moment ce cred că arată doar un exemplu:

Câteva cuvinte la exemplul de mai sus ..

După cum probabil ați observat ca selectori pseudo-clasă nu poate fi doar unul dintre elementele - tag-ul, dar clasa sau ID-ul. Deci, în exemplul clasei .menu aplicat pseudo Hover și sintaxa ia forma următoare:

Nu sunt încurcate în terminologia?

În cuvinte simple, vom spune că browser-ul dig este evidențiat în roșu numai acele link-uri care sunt situate în blocul de navigare (afișat în klass.menu), și se lasă restul așa cum este!

Planare pseudo poate fi aplicat la orice element afișat pe ecran, astfel încât în ​​exemplul nostru, pentru a organiza rândurile de iluminat din tabel, am aplicat tag-ul . Cu toate acestea, trebuie remarcat că browser-ul este Internet Explorer 6 și versiunile anterioare suporta hover link-uri numai pseudo - tag . astfel încât, de exemplu, un rând de tabel, atunci când treceți mouse-ul peste ele, în browserele IE6 și de mai jos nu vor fi iluminate!

Acest element pseudo definește stilul, în cazul în care este focalizat. Acum, de fapt, că este punctul central. așa cum este cazul cu optica si iluzie, accentul cuvântul în CSS va desemna ca un anumit obiect, ci mai degrabă un element este punctul central al observatorului - utilizatorul. Astfel de elemente pot fi tag-uri și .</p> <p>Uită-te la un exemplu:</p> <p>În exemplul, textul în caseta de text <input> inițial în negru, dar, de îndată ce elementul devine focusul - care este, în cazul în care un utilizator face clic pe teren și a începe tastarea, se va transforma roșu.</p> <p>Asta e tot hocus-pocus ..</p> <p>Cred că în cursul CSS învățare ați înțeles deja, că toate elementele pot fi definite ca un părinte sau un copil, și că elementul părinte poate conține mai multe elemente copil, bine, de exemplu:</p> <p>Deci, pseudo-prim copil va determina stilul primului element copil sub containerului părinte.</p> <p>Fii atent la faptul că, în cazul în unitatea mamă filialelor punctele a fost orice altă etichetă, titlu <h1> De exemplu, pseudo-prim-copil nu ar fi acționat în primul paragraf. deoarece, deși punctul și primul element din mamă, dar pentru al doilea bloc.</p> <p>Aplicați această pseudo-unde. Dacă doriți să setați un stil diferit pentru prima și următoarele elemente, de exemplu, pentru a face un „capac picătură“ - singura la începutul documentului sau eticheta în primul paragraf de text pe toate paginile site-ului. selectați primul element din listă. etc.</p> <p>Pseudo-lang specifică limba textului unui element sau a întregului document.</p> <p><meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"><br><meta http-equiv="Content-Language" Content="ru"></p> <p>Deci, în scopul de a determina limba unui singur bloc de text folosit un pseudo-lang () - paranteze este, de fapt specificat limba.</p> <p>Limba poate fi:</p> <p>Toate împreună este scris după cum urmează:</p> <p>- aici am arătat că textul luat într-un recipient <span> Engleză și că el ar trebui să apară în caractere cursive.</p> <p>Vă rugăm să rețineți că în tag-ul, în această secțiune caz, indicăm cu atributul lang a folosit un limbaj și stilul de: <p lang="en">text</p> înregistrate în blocul CSS.</p> <p>Doar lang pseudo-clasa vă permite să stabiliți tipul de ghilimele pentru citate (tag-ul <q> ) Folosind citatele de valoare - citate. În România folosesc în mod obișnuit ghilimele duble, în alte țări, situația este diferită.</p> <p>Ondulat între paranteze, după valoarea specificată de caractere Unicode citate / s sau o linie de lungime / s pentru deschidere și închidere ghilimele.</p> <p>· Pseudo-clase nu poate fi încorporat într-un document HTML folosind atributul de stil. Puteți numai folosind tag-ul <style> șef al documentului sau un fișier extern CSS.</p> <p>· Dacă selectorul, un pseudo sau nu indică în mod expres și scrie ca acest lucru, de exemplu:</p> <p>- aceasta ar însemna că efectul pseudo va fi extins la toate elementele documentului.</p> <p>· IE6 browser-ul de mai jos și ignoră aproape toate pseudo-clase.</p> <p>Pseudo - este un tip special de proprietăți CSS care vă permit să lucrați nu pe elementul în sine, iar pe partea sa separată.</p> <p>Aici este o listă a tuturor psevdoelemetov:</p> <p>·: Prima literă - Stilul de prima literă a blocului de text</p> <p>·: Prima linie - Stilul blocului de text al primei linii</p> <p>·: După - Adaugă conținut după un element.</p> <p>·: Înainte de a - Adaugă conținut în elementul.</p> <p>· :: selecție - stilul selectat de utilizator-text.</p> <p>La fel ca și în cazul cu un pseudo pseudo utilizat în conformitate cu următoarea sintaxă:</p> <p>În acest caz, am subliniat faptul că prima literă a tuturor punctelor va fi de culoare roșie.</p> <p>Ei bine, să trecem pseudo-enumerate.</p> <p>Prima literă pseudo-element specifică stilul în care prima literă a unei casete de text, pur și simplu, fără efort vă permite să „drop cap.“ Ați observat că pe acest site în primele litere ale paragrafelor sunt diferite culori și dimensiuni de la celelalte litere? - acesta este un exemplu de lucrare de pseudo-prima literă.</p> <p>Ei bine, dacă acest exemplu vă puteți uita la puțin mai mult unul:</p> <p>In exemplul de mai sus, am schimbat conținutul dimensiunea, fontul, culoarea și grăsime din prima literă a tuturor punctelor de pe pagină.</p> <p>Stilul primul rând.</p> <p>Pseudo prima linie defineste stilul de prima linie din blocul de text.</p> <p>Sincer, nu știu în ce situații este într-adevăr recomandabil să se folosească un pseudo-prim-line. deși eu nu exclude că astfel de situații se întâmplă. Acest lucru se datorează în primul rând faptului că, în funcție de extensie a ecranului, dimensiunea fontului, intervalul dintre cuvinte și simboluri, etc. prima linie din blocul de text va fi de lungime diferită, ceea ce nu permite webmasterilor un control deplin asupra stilul blocului de text.</p> <p>Toate împreună este scris după cum urmează:</p> <p>Acum, după fiecare paragraf va fi adăugat inscripția: „Sfârșitul și care a ascultat bine făcut !!“</p> <p>Conținutul valoarea proprietății poate fi:</p> <p>· „Text“ - de fapt, orice text sau simboluri.</p> <p>· Open-citat - deschiderea ofertă.</p> <p>· Închide ghilimele - închidere Ghilimele.</p> <p>· Nu-deschis citat - anulează marca de deschidere citat.</p> <p>· Nu-close-citat - anulează cotația de închidere.</p> <p>· Moștenire - moștenesc valoarea elementului mamă.</p> <p>· Nici una - nu este adăugat nimic.</p> <p>· Counter - indică valoarea contorului, o proprietate predeterminată contra-resetare.</p> <p>· Attr (atribut tag-ul) - arată textul care este valoarea unui atribut al unei etichete de paranteze.</p> <p>Un asterisc înainte de pseudo *: pseudo-element de indică faptul că regulile de stil specificate se aplică tuturor elementelor. Deci, în exemplul nostru, textul de la începutul tuturor albastru, dar în cele din urmă toate roșu, în cazul în care este, desigur, nu trebuie să fie specificate, cum ar fi în cazul „markeri“ verzi în lista de exemple.</p> <p>Ca un conținut adăugat poate introduce orice sau obiect, în exemplul am adăugat o imagine a tuturor titlurilor, dar în cazul în care browser-ul nu se poate ocupa de acest lucru sau acel fișier, se adaugă nimic.</p> <p>Caractere speciale HTML (de exemplu, un caracter special: ¶ ), Vor fi afișate în text simplu (¶ ¶ nu), astfel încât, dacă aveți nevoie să adăugați orice fel de utilizare înflorească artful Unicode.</p> <p>Pseudo-după și înainte. precum și de proprietate de conținut nu are suport pentru Internet Explorer 7 și mai mici.</p> <h4>articole similare</h4> <ul> <li> <p><a href="/revista-60/miere-erytromul-terapeutice-proprietati-utile-si.html">Miere ERYTROMUL terapeutice, proprietăți utile, și cum să ia</a></p> </li> <li> <p><a href="/revista-60/erytromul-honey-proprietati-utile.html">ERYTROMUL Honey, proprietăți utile</a></p> </li> <li> <p><a href="/revista-60/sarsaparilla-proprietati-medicinale-si.html">Sarsaparilla - proprietăți medicinale și contraindicații aplicare</a></p> </li> </ul> <div class="vnizine"><p style="text-align: left;"><a href="/revista-60/cum-sa-nu-te-enervezi-la-copilul-ei.html">Pagina anterioară</a></p><p style="text-align: right;"><a href="/revista-60/rosu-si-manichiura-alb.html">Pagina următoare</a></p> </div> </article> </div> </div> </div> </div><footer class="akatita-footer clearfix"> <div class="akatita-content-layout layout-item-0"> <div class="akatita-content-layout-row"> <div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Articole aleatoare</p> <br> <ul> <li><a href="/utilizator-167/reumplerea-capacului-rezervorului-de-expansiune.html">Reumplerea capacului rezervorului de expansiune</a></li> <li><a href="/utilizator-131/multifunctional-o-pisica-intr-o-pate-clasa-mea-de.html">Multifunctional - o pisica intr-o pate - clasa mea de maestru</a></li> <li><a href="/utilizator-215/articol-minim-de-instrumente-pentru-repararea-unui.html">Articol minim de instrumente pentru repararea unui apartament din piesa mea de copeică</a></li> <li><a href="/utilizator-145/curatarea-monedelor.html">Curățarea monedelor</a></li> <li><a href="/utilizator-175/intrebare-serioasa.html">Întrebare serioasă</a></li> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">locație</p> <br> <ul> <li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li> <li><a href="/adresa.html">Adresa</a></li> </ul> <ol> <li><a href="/sitemap/sitemap93.html">sitemap</a></li> <li><a href="/sitemap/sitemap320.html">sitemap</a></li> <li><a href="/sitemap/sitemap404.html">sitemap</a></li> <li><a href="/sitemap/sitemap556.html">sitemap</a></li> <li><a href="/sitemap/sitemap1035.html">sitemap</a></li> </ol> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Mai multe despre noi</p> <br> <ul> <li><a href="/contactati-ne.html">Contactați-ne</a></li> <li><a href="/despre-site.html">Despre site</a></li></ul> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 40%"> <p style="text-align:right;"><a href="#"></a>Drepturi de autor © 2025. Toate drepturile rezervate.</p><br> <p style="text-align: right;"> <script> new Image().src = "https://counter.yadro.ru/hit;adolfru?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script> </p> </div> </div> </div> </footer> </div> </div></body> </html>