Čitao to na neki blog ... mislila da je to lijepo katalogiziranje to za buduće ref .... Također bi moglo biti važno pitanje intervju da bi pitao neki dan ....
Napišite isječak CSS koji će se prikazati odlomak u plavom u starijim preglednicima, crveno u novijim preglednicima, zelene i crne u IE6 IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Ponovno Biciklizam je Buzzword U web razvoj i to znači da ne razlikuje. Štedi energiju, u smislu napora!
Tijekom godina pisanja CSS i stvaranje HTML od dizajna, ja sam nakon nekoliko najboljih praksi, u potrazi za uštedu vremena i energije u ono što se obično pojam kao "Re-inventing Wheel". Vrijeme i vrijeme opet, ja sam sebi rekao da moram stvoriti nekoliko predložaka, neki standardni re-korisna CSS da bih koristiti OUT okvira u mom budućem radu. Iako nije u potpunosti, ali sam uspio ostvariti neke ciljeve.
U daljnjem, ponovno korištenje CSS, morao sam pogledati nekoliko CSS okvirima koji su obično dostupni nama i odlučili staviti ih na korištenje, kao što su to pokušao i testirani i stvorio mnogo iskusnih developera, tada sebe. Što je još važnije "IZBJEGAVATI RE-OSMIŠLJANJE".
Iako je poznato da veterana, pokušao sam da pero neki ključni koncepti / najbolje prakse / misli da je otišao u stvaranju takvih okvira, kako bi RE-BICIKLIZAM CSS moguće. Nadam se da će to pomoći oko CSS razvijatelja koji su samo o to i nedavno ukrcali CSS bandwagon!
Koristite konvenciji imenovanja
To mora biti najvažniji faktor u izradi CSS / HTML ponovno koristiti. Davanje u skladu imena elemenata stranice omogućuje ponovno korištenje stranice komponenti i njihovih stilova s malo ili promjenama. U skladu s tim argumentom, čak i HTML5, u veliku promjenu promjene tijekom svojih prethodnika, je predstaviti neke strukturne oznake viz. <article>, <section>, <header>, <aside> i <nav> [ Što će HTML5 donijeti? ]. Čak i uz HTML 4 (ili manje), najbolje je da spomenemo standardne dijelove stranici consistanly kao u jednostavnom primjeru u nastavku ...
Zapamtite, većina stranice na svoj projekt, završiti imaju iste osnovne elemente. Prepoznaju ove zajedničke elemente stranice osnovne ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Ponovno postavljanje zadane stilove (CSS Resetiranje): Bilo da koristite okvir ili pisati svoj vlastiti, morate CSS Vraćanje [ Što su CSS Resetiranje? ], kao što su smanjiti ili eliminirati ponekad vizualne nedosljednosti koje se pojavljuju između različitih preglednika. U jednostavnim riječima Mehanizam CSS Reset postavlja stilova HTML element na nula ili null vrijednosti, od tuda glavne nikakve vrijednosti zadani preglednik oni svibanj poza. To daje čistu škriljevca za postavljanje svojstva tih elemenata praznina bilo User-Agent [Zadane CSS2.1 Korisnički Agent style sheet Defaults ]. Svi CSS okviri nemaju od reset mehanizma. Ako pišete vas vlastiti CSS Vraćanje, riječ oprez je da ako vam se dogoditi da zaboravite resetirati ključnu imovinu, to bi moglo dovesti do cross-preglednika pitanjima, koji su vrlo teško za ispravljanje. Sjeti se, zadržati kopiju ponovno postavljanje stilova i ispustite ih u svaki novi projekt koji ste stvorili.
tijelo, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, unaprijed, oblik, fieldset, ulaz, odaberite, tekstualno polje, p, blockquote, stol, th, td { border: 0px; margin: 0; padding: 0; }
Postavljanje zadane (osnovne stilovi) na elemente:
Nakon što ste postavili (na nulu ili NULL) zadane vrijednosti pojedinih atributa određenih HTML elemenata, potrebno je primijeniti neke stilove diljem svakom slučaju tih elemenata. Ovo zadana postavka može se razlikovati po dizajnu ili prema najbolje prakse koje pratite.
Većina CSS okviri, uvijek uvodi neke nove zadane, osim resetiranja stilova zadani preglednik.
Ti se ispuni prazninu u User-Agent (Zadane uklonio je CSS Reset), te će biti dosljedni u cijeloj preglednicima.
Zapamtite, Osnovni stilovi koriste za postavljanje stilova koji će se koristiti dizajn širok. npr..
html {font-size: 77%; font-family: Arial, sans-serif;} jaka, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Sažetak HTML stilovi za zajedničke dijelove i zajedničke razredi:
Najveći projekt koji se sastoji od nekoliko stranica imat će zajedničke HTML elementi preko Web stranica, npr. neke vrste obrazaca, upozorenja i pogreške, Custom pučanstvo, LightBoxes itd. Budući da su takve komponente se ponovo preko projekata, to će biti korisno za pružanje skup klasa povezanih s prethodno definiranih stilova za tih komponenti i možete uštedjeti puno vremena.
Osim definiranja reusable definicije stilova za HTML zajedničkih komponenti, mogli bismo apstraktne klase stilova koji se odnose na tipografiji, boje ili čak izgleda. Ja sam obično koristite ... zajedničke klase poput Clearfix i Font08 i FontGrey i AlignL i DisplayB itd.
Obrazac za ulaz {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; visina: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} Obrazac tekstualno polje {border: 0px; background: # FFFFFF; boja: # 000000; font-size: .9 em; line-height: 1.5em; overflow: vidljivi;} . Fbold {font-weight: bold; color: # cccccc;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {jasna: i;} . Divider {border-top: 1px solid # 647B06, granični dna: 1px solid # 9CC00A, visina: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: centar} . Floatr {float: right;}. Floatl {plovak: lijevo;}
Popravci uobičajenih preglednika Igra riječima
Različiti preglednici provesti CSS kod i osigurati različit stupanj podrške za CSS specifikacijama. Rezultat toga .... "Browser" quirks, da smo programeri napustili kako bi se borila. Napose, IE6 proganja najviše CSS kodera s roka u susret. Dobra vijest je iskustvo okupio moguće reusable popravke na ova pitanja (često nazvao kao CSS Hacks ).
Sjeti se, zadržati te hack / popravci ruci
/ * Slijedeće zoom: 1 pravilo je posebno za IE6 + IE7. * / * Html. Clearfix, *:. Prvo dijete + html clearfix { zoom: 1; }
Držite Pročišćavanje Vaše CSS
Konačno. Ako ste inspirirani i namjeravam koristiti jedan ili više okvira CSS, evo brzo je popis nekoliko popularnih one ....
Ne zaboravite, korištenjem CSS okvira ne znači da ste lijeni stvoriti jedan od vlastite ... To znači da ste pametni da uče od drugih iskustva i pogreške, uštedjeti vrijeme i povećati produktivnost!!
CSS završili 10 godina postojanja ove godine! Oni koji su oko za neko vrijeme, zarađivati svoj kruh (ili ne) koristeći CSS, onda možda svjesni koliko smo natašte za dobar odabir fontova. Čak i uz nedostatak fontova dizajneri poput onih na CSS Zen Garden su koristili CSS pozadinske slike koja će zamijeniti fontove u potrazi za događaj neki pravdu svojim dizajnom. Također smo pokušali Flash / JavaScript ® hack kako bi se postigla svoje ciljeve dizajn. Nipošto to je pogrešan način da biste dobili fontove želimo na našim web dizajna, ali definitivno nije najpoželjniji način. i više godina, web dizajner, poput mene, u potpunosti su se oslonili na deset ili tako fontova za svojim dizajnom.
Nedavni događaji u web standarda i formata fonta bi bilo moguće donijeti HTML tekst u slogove drugih od istih starih zadanih fontova. Dolazi u "@ Font" CSS decleration.
@ Font provids rješenje za povezivanje sa stvarnim fonta datoteku i preuzimanje s weba. Korištenje mijenjate brzine Font, dizajneri mogu koristiti fontove bez zamrznuti tekst kao pozadinske slike. Provedba je vrlo ravno naprijed, kao što je prikazano u nastavku, ali i sve dobre stvari imaju CON dio njega, nisu svi preglednici podržavaju jednu "vrstu fonta". Ako planirate koristiti mijenjate brzine Font na stranice sa zahtijevaju križ preglednik podrška, onda ćete morati osigurati izvore na različite font-vrsta isto.
Korištenje mijenjate brzine Font
@ Font-face { font-family: "CalligraphyFLFRegular '; src: url ('CalligraphyFLF.eot'); src: mjesni ('CalligraphyFLF'), lokalne ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('woff'), url ('CalligraphyFLF.ttf') format ("TrueType"), url ('CalligraphyFLF . svg # CalligraphyFLF ') format ("svg'); } @ Font-face { font-family: "Vaš tipografiju"; src: url ("fontovi / font_filename.eot"); src: mjesni ("Alternativni ime"), lokalne ("Alternatename"), url ("fontovi / font_filename.woff") format ("woff"), url ("fontovi / font_filename.otf") format ("OpenType"), url ("fontovi / font_filename.svg # font_filename") format ("SVG"); } h2 {font-family: "Vaš tipografiju", Gruzija, serif;}
Kao što možete vidjeti iz gornjeg primjera, da su izabrani slovima fonta, treba povezati skup fonttypes za isti slovima. Dakle ljudi nazivaju "Font Kit".
Postoje slova Kits na raspolaganju da se eksplicitno omogućuje povezivanje s CSS mijenjate brzine font-face imovine njemu pod End User License sporazuma (EULA).
Korisni WebFont Resursi:
Vrijeme i opet, kada su svi ostali preglednici vidio da se ponašaju kao što je rekao po W3C pravila, tj ako spirale izvan razvoja duha bacajući tantrum, to ne činiti se to imati popraviti. Baš kao što je to jedan problem u IE7.
Problem Statement:
Ja i tako možda mnogih drugih ozbiljnih web programeri su primijetili više nego mnogo puta, da kada se ugniježđena pliva u izgledu, o prelazite preko neke veze (sidro tags), koji sadrži spremnik čini pomak nekoliko piksela desno . Pokušao sam na Google rješenja za taj problem, ali su teško pronaći bilo koji razuman odgovor na zašto i kada se ona pojavi (koje bi mogle pomoći da se spriječi ovaj problem iz događa), pa nisam našao jasnu rješenje problema ili ...
Moguće rješenje:
Iz iskustva, imam obavijest 90 posto posto od puta, odnosno, da je ovaj problem riješen dodavanjem zoom nekretnine u CSS definiciji pogrešno ponašaju kontejner ...
# Somediv { zoom: 1; }
opet razlozi su dvosmislene ... probajte ovo ...
Neki elementi u IE imati "hasLayout" imovine, što je "istina" po defaultu. Mnogi vizualni CSS ponašanja, na primjer, alfa filter radi samo na element koji hasLayout. i {Zoom: 1} Čini se da ciljnim elemente u hasLayout imovine .... Korisni? JA dont misliti tako ...
Zum Objekt se čini da podržava Chrome, ali je njegova uporaba utisak čini se da bi puno negativan utjecaj na moj izgled ... probati, ako to radi za vas ... ako ne, Označite ovu stranicu u "CSS craps"
Jučer, nakon pitanja naišla sam sa CSS resetira u Google Chrome ... mislio sam kopati malo dublje u području User Agent Style Sheets ...
Pronađeno ovu tablicu na zadane vrijednosti CSS2.1 User Agent Style Sheets za ... za one koji su svjesni što "Suradnik Agent Style Sheets" je slijediti Što je User Agent Style Sheets (Specifikacija) .
Za potpuni popis CSS 2.1 User Agent Style Sheets zadane kliknite ovdje
Jučer, kao i svaki drugi "Dan svinja Igralište", radila sam na nekim CSS / tableless izgleda. Sve ide dobro u IE 7 i FF 3 i Chrome, sve dok odjednom, vidio sam neki un-ignorable margine vidjeti samo u Google Chromeu. Iako je vrlo čudno i worring, to je neki novi bug / problem koji sam naići, došlo je konačno neki začin u moj zemaljski rad. Sad (ali lijepa) je dobio određen u roku od nekoliko minuta od sonde ...
Uglavnom, to je izgledalo kao Google Chrome ignorira moje CSS Vraćanje (margin: 0px). To je zapravo bio uzrokovan stylesheet korisničkog agenta (-webkit-padding-start: 40px). Dakle, rješenje je vratiti taj stil postavljanjem padding: 0 čudno ponaša se elementi.
Dobar način da se spriječi ovaj problem iz događa na bilo koji element je koristiti globalnu CSS ostatka kako slijedi
* {Margin: 0; padding: 0;}
Što je to User Agent Style Sheets (Specifikacija)?
Sljedeći izvadak je preuzet iz http://meiert.com/en/blog/20070922/user-agent-style-sheets/~~HEAD=pobj , slijedite link za čitanje više o Korisničke Sheets Agent Style
CSS 1 uvodi ideju tvrdeći da svaki korisnik agent (UA, često 'web preglednik "ili" web klijenta) će imati list Default Style koja predstavlja dokumente u razumnom - ali vjerojatno zemaljski - način. CSS 2 kaže da sukladna korisnički agenti moraju primijeniti list zadani stil (ili se ponašaju kao da jesu) i da je korisnik agenta Default Style sheet bi trebao predstaviti elemente dokumenta jeziku na način da zadovoljavaju opće prezentacijske očekivanja dokumenta jeziku; CSS 3 je vjerojatno da će biti od istog uma.
Budući da su CSS specifikacije ostavite ga do implementacije li koristiti "pravi" style sheet za zadani prikaz ili ne, to nije iznenađujuće da ne možete pronaći list zadani stil u svakom preglednika instalacijskoj mapi. Za razliku od Microsoft Internet Explorer, kao i Opere, na primjer (i koliko ja znam), Gecko preglednici kao Firefox i Netscape Navigator (pogledajte "html.css"), ali i Konqueror, a čine ga jednostavno shvatiti svoju zadani styling.
Još jedan brz pih. Ovdje je nešto jednostavno i lijepo Koristeći moć CSS ... ali je teško Osmisliti (i to sigurno nije bilo mene) za početak. Dodavanje Dropshadow, bi mogao biti peice torte za mnoge od nas, koristeći neke za uređivanje slika alate kao što su Photoshop anf vatromet itd.
Razlog zašto sam se odlučio za drop sjene koristeći CSS je da, obično uz stvaranje stranice dizajn / HTML zahtjeva, zahtjevi bi Ponavljanje. Ono što mislim je, u postojećoj web stranice s mnogo slika, kao što su one prikazuju vozarina popis ili galeriju slika, to će biti teško preobraditi cijeli opterećenja od slika koje su već istovaraju dodati ili ukloniti sjene, za koje stvar.
Dakle, ako ste učinili nešto naprijed razmišljanja uz stvaranje HTMLS za dodavanje ovih dodatnih podjela ili obično situacija je da imate Loop Logic generira ove ikone / minijature XSL, PHP. Java ili bilo koji drugi programski / skriptni jezik, možete ga dodati u bilo koje vrijeme, onda je samo pitanje show i skriva te sjene koristeći CSS svojstvo zaslona, kao i po zahtjevima klijenata sve mijenja ... I havn't učinio ovu vrstu naprijed razmišljanja prije toga ... ali ahev počeo se sada!
U donjem primjeru, izvorna slika je sjena besplatno i dropshadows se primjenjuju prema potrebi! Također, ja sam otišao malo extra, pomoću trikova moje ranije Tutankamona (Well! to su vjerojatno najkraći izbor Tutorials, tako da samo opravdano nazivajući ih "Tuta" 'a) oko Korištenje CSS Isječak nekretninu za pokazati samo
Zašto želim da to shvati?? Humm ...!!
Većina CSS pisaca će se složiti da CSS Clip vlasništvo je vjerojatno jedan od većine UN-rabljenih CSS svojstvima. Bilo je tako vrijedi i za mene previše i bio je sretan da ga zanemariti, dok sam počeo izmjenom MOOTOOLS DVA Tipka (PIN) Klizač Komponenta (uz raspona pokazatelja) .
Tu je bio dobar prijedlog jednog od sastavnih korisnika izmijeniti klizač komponentu koristeći skresanim backgroud slike (protiv promjenjivom širinom podjele) naznačiti klizač niz. Tako je došlo moje vrijeme za ulazak u zabavno, ali ne-ovlašteni (za mene ofcourse) vode imovine CSS isječaka.
Dobro! koliko teško može biti? Nije puno uopće ... DA i NE. Sintaksa za korištenje imovine CSS Isječak je prilično uspravno, ali značenje / usuage je malo croocked. Uz memoriju poput moje, svaki put sam sjesti da prerađuje na moj Klizač skripte ... moram tokeep odnosi natrag u korištenju ove CLIP imovine, podsjetiti sebe logiku koju sam stvorio u mojoj skripti .... Amo! mislio olovkom dolje, s nadom da zapamtite da u budućnosti (ali i za dobrobit onih koji čini boggled prema objektu CSS isječaka)
Što CSS Clip učiniti?
Clip je dio vizualne efekte modula CSS 2.1. Jednostavno rečeno, njen posao je da stavite vidljiv prozor na vrhu objekta koji se ošišanu, stoga clipping slike i stvaranja sličice bez stvoriti dodatne datoteke (već sam stavio ovu značajku da biste bolje iskoristiti u Klizač komponente 
)
Korištenje imovine CSS isječaka, možete stvoriti clipping koristeći Prav oblik. Kao i mnoge druge CSS svojstva (poput marže i padding itd.), koristeći Prav zahtijeva četiri koordinate Top, Desno, Dolje, Lijevo (TRBL). Croocked priroda ove imovine odražava kada se bliži pogled na koliko isječak izračunava clipping regiju, koristeći ove četiri koordinate (šalje mozak u bacanje za neko vrijeme). Sada vas zbuniti dno počinje od vrha, kao i pravo počinje s lijeve strane. . Vidite što sam rekao? .... Stoga ovaj post ...
Ova mala zbrka može lako nestati, s ovim vizualne objašnjenje CSS isječaka / vne imovine kao što slijedi!!
Zadatak smo počeli je isječak sljedeće sličicu u četvrtastim gleda slike (kao i širok-kut slike)
| |  |
| Izvorni Thumbnal / Slika | Clip Zahtjevi za Sqaure Thumbmail |
Prije nego što smo morali nositi sa CSS-om za stvaranje naše izgleda stranice, poravnavanje neki sadržaj unutar ćelije tablice činilo samo dječja igra. Jednostavno postavite "poravnati" ili "valign" vlasništvo stolom za poravnanje po vašem izboru, komad torte!
S CSS rasporedima, iako imamo "vertikalna-align" svojstvo elemenata, to ne činiti se biti kao jednostavan kao "poravnavanje" ili "valign svojstva". Da bi se više specifiic "okomiti-align" nikad ne izgleda kao da se riješi bilo koji od vaših problema, pogotovo ako se napisati komad cross-preglednik CSS.
Bez korištenja HTML tablicama, Problem sa središtem na objektu, bilo da je slika ili neki tekst unutar sadrže podjele, je vjerojatno bio svaki UI / CSS developera noćna mora u nekom trenutku. Ovaj problem se dodatno extrapolates svoje brige usklađivanja, ako se objekt u središtu je dinamičan u prirodi, tj. kada njegova visina je promjenjiva (nepoznata visina).
Iako ne postoji poznati ravno naprijed rješenje koje će raditi preko raspon preglednicima moramo baviti, rješenje da sam pokušao doći do čini se da rade u nekoliko preglednicima da sam ga pokušao u (IE6, IE 7 , FF).
RJEŠENJE:
U preglednicima kao što su Mozilla, Opera i Safari, čudno ponašaju "okomiti-align" imovina može dovesti k pameti, jednostavno postavljanjem "pokazivati" svojstvo sadrže podjele na "stol-stanice" (display: table-cell) .
Problem i dalje ostaje s obitelji IE preglednika, koji je, još uvijek ne čini se da razumjeti što sa "Tablica stanica" imovine i neznanju kao što su oni, oni su samo ga ignorirati. Rješenje dano u nastavku, iako jednostavne, oglasi nekoliko više DOM elemenata u HTML kako bi se stvari događaju.
CSS i HTML izgleda ovako
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> Views: 3456 </ div>
</ Div>
</ Div>
Rezultat izgleda ovako: -
prikaz demo ovdje se | download source Files (Downloaded 452 puta)
TOP Poravnaj CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> stajališta: 1234 </ div>
</ Div>
</ Div>
Rezultat izgleda ovako: -
DONJA Poravnaj CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> stajališta: 1234 </ div>
</ Div>
</ Div>
Rezultat izgleda ovako: -
prikaz demo ovdje | Preuzmite ovdje
Činiti se poput dobi, budući da sam pokušava pronaći razumno rješenje ovog problema poravnanje. Ali sada s ovim rješenjem, osjećam se kao kod malo mira.
Uz nadu da će jednog dana
Preuzmite CSS and HTML iz gornjeg rješenja ovdje (Downloaded 452 puta) .. za razumljivosti, CSS nije optimizirana
PS: I usput, to su sličice nekih slika sam kliknuo ...
CSS za Non-IE browserima: Njegova nije vijest za CSS developera koji, CSS djece selektora poput donjem primjeru, ne činiti se to funkcionirati u IE.
npr. div> {span neki css}, to znači da "kada span element dijete (a ne unuka ili veliki Grand dijete i sl.) od dijeljenja elementa".
Ali mi smo koristili ovaj CON u našu korist. Povijesno gledano, dijete izbornik se koristi za skrivanje CSS naredbe od IE. Jednostavno postavljanje html>body ispred bilo koje CSS zapovjedne IE će ga ignorirati:
html>body .foo { CSS commands go here ;}
Ovo funkcionira jer <body> je uvijek dijete <html> - može, naravno, nikada neće biti unuka ili praunuče od <html> .
Sada da IE 7 razumije dijete odabir, morate umetnite praznu komentarom u neposredno nakon što je veći od znaka IE 7 onda neće razumjeti ovaj odabir (tko zna zašto!), Te će stoga u potpunosti ignoriraju ovu CSS naredbu.:
html> /**/ body .foo { CSS commands go here ;}
Ako već niste vidjeli to i prije, imaju pročitajte sljedeće, kao i
