Blok nestaje sa ciljnim cssom. Cilj u CSS-u. Kako ovo funkcionira? Upravljanje neciljanim objektima

Danas ćemo govoriti o glavnim funkcijama koje se odnose na sa pseudo klasom :target i kako možete da ga koristite za kreiranje neverovatnih efekata sa čistim CSS-om, naučite kako da kreirate slajdove sa njim css pomoć i još mnogo toga.

Šta je: cilj?

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: cilj (font-size: 50px; text-decoration: underline; color: #37aee4; )

Dodajmo animaciju

Začinimo naš efekat i dodamo malo animacije, poput lijepog malog prijelaza za promjenu boje. Pogledajte kako to radi.

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Ženeva, sans-serif; -webkit-transition: boja 0.5s lakoća; -moz-transition: boja 0.5s lakoća; -o-prijelaz: boja 0.5s s lakoća: boja 0,5s lakoća: boja 0,5s lakoća (font-size: 50px; text-decoration: underline; color: #37aee4;)

Upravljanje neciljanim objektima

Recimo da želimo promijeniti stilove pasusa koji dolazi iza odabranog naslova.

Ovo je vrlo lako učiniti koristeći sljedeći kod. Pogledajte demo.

h1: target + p (pozadina: #f7f7f7; padding: 10px; )

Kreiranje jednostavne prezentacije pomoću CSS-a

Programeri su smislili tone aplikacija koristeći pseudo klasu : cilj. Ovaj pseudo-selektor može biti koristan pri kreiranju kartica ili čak projekcija slajdova. Pogledajmo kako se ovo drugo može implementirati.

Kreirajmo neuređenu listu. Svaka stavka liste će sadržavati sidro oznake koje ukazuje na ID isječka i sliku s odgovarajućim ID-om.

  • Jedan
  • Dva
  • Tri
  • Četiri
  • Pet

Sada dodajmo naše stilove:

* ( margina: 0px; padding: 0px; ) #slideshow ( margin: 50px auto; pozicija: relativna; širina: 400px; ) ul ( stil liste: nijedan; ) li ( float: lijevo; overflow: skriveno; margina: 0 20px 0 0; ) li a (boja: #222; text-decoration: none; font: 15px/1 Helvetica, sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-transition: boja 0,5s lakoća; -o-prijelaz: boja 0,5s lakoća: 0,5s lakoća: -1s; -moz-transition: opacity 1s ease-in-out: neprozirnost 1s ease-in-out ) li img:target (z-indeks); li img:not(:target) (prozirnost: 0; )

Prvo da dodamo float: lijevo svi elementi na našoj listi. Koristili smo apsolutno i relativno pozicioniranje za elemente.

Dalje, idemo na instalaciju z-indeks: -1 za sve slike i zatim postavite z-indeks: 1 za ciljne slike. Ovo će uzrokovati promjenu slike kada kliknete na stavku liste. Da bi prijelaz bio glatkiji, postavit ćemo vrijednost neprozirnosti za ostale slike 0 .

Pogledajte čist CSS demonstraciju slajdova.

Kompatibilnost među pretraživačima

Pseudo-klasa : cilj je CSS selektor trećeg nivoa, što znači da je podržan u skoro svakom pretraživaču osim (nikada nećete pogoditi) ... IE. Dobri stari magarac podržava samo CSS3 selektore u verzijama 9 i 10.

Kao i svaki drugi problem s prikazivanjem CSS3 selektora u IE, ovo je prilično lako rješenje pomoću Selectivizr-a.

Zahvaljujući ovom dodatku i malo vudu magije, potrebni CSS3 selektori će biti podržani čak i u IE6.

Zaključak

Korištenje pseudo-klasa u početku može izgledati komplikovano, ali ćete shvatiti kako vam one mogu olakšati rad i učiniti vašu web stranicu zanimljivijom. Pseudo-selektor

:target- dobar primjer ovoga. Samo pazite da ne pretjerate sa stilovima.

Još jedan zanimljiv slučaj upotrebe :target

Pseudo class:target je jedna od sjajnih karakteristika CSS3. Odgovara elementu na koji ukazuje identifikator u URI-ju dokumenta.

Identifikator u URI-u sadrži znak “#” iza kojeg slijedi ime identifikatora koji odgovara vrijednosti atributa id element u dokumentu.

Podrška

Pošto govorimo o CSS3, pseudo klasu podržavaju svi moderni pretraživači osim IE verzija od 6 do 8. Uobičajeno razočaranje ne bi trebalo da vas spreči da odlučite da koristite:target. IE9 već podržava pseudo class:target.

Kako koristiti:target?

Ova pseudo klasa može imati svoj stil, baš kao i pseudo klase :hover, :active ili :focus za linkove. Isto kao i pomenute pseudo klase :target koristi se za određene radnje na web stranici. Naročito kada koristite identifikator fragmenta poput ovog: http://example.com/index.html#lorem-ipsum.

Demonstracija

Demo stranica pruža vrlo jasan primjer kako i kada koristiti :target. Pseudo klasa :target može poboljšati upotrebljivost vašeg resursa.

HTML markup

Ispod je primjer iz demo. Imamo 4 linka i isti broj blokova. Svaka grupa ima svoj jedinstveni identifikator.

  • Blok 1
  • Blok 2
  • Blok 3
  • Blok 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.

Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Klasa aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut ague euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.

CSS

Sljedeći CSS kod omogućava postizanje željenog efekta, uz pomoć kojeg se ističe blok s odgovarajućim ID-om (sjena se pojavljuje oko pravokutnika).

/* Dodajte malo razmaka */ ul, div ( margin-bottom: 10px; ) /* Zadani stil bloka */ div ( padding: 10px; granica: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px ) /* Promjena izgleda izlaza kada se podudara */ div:target ( border-color: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px; #9c9c9c ; box-shadow: 0 0 4px #9c9c9c ;

Ispod je rezultat koda. Ako kliknete na vezu, odgovarajući blok je označen i postaje aktivan.

Pozdrav, dragi čitaoci blog stranice. Odlučio sam da današnju publikaciju posvetim najvažnijem aspektu webmasteringa, gdje ću pokušati detaljno objasniti što je hiperveza, s kojom je neraskidivo povezana, a koja je, pak, bez pretjerivanja osnova interneta.

Ali da biste ispravno kreirali hiperveze i umetnuli ih u kod web stranica (na primjer, vaše web stranice), morate proučiti odgovarajuće područje ​​​​jezika za označavanje hiperteksta (), budući da se ovi elementi formiraju pomoću HTML-a tag, koji ima mogućnost nadogradnje veze na željenu jednu vrstu.

Dakle, danas ćemo pogledati od kojih dijelova se sastoji hiperveza, kako korištenje ciljnog praznog atributa omogućava otvaranje stranice u novom prozoru (kartici), kako bilo koju sliku učiniti vezom i mnoge druge važne detalje. Između ostalog, ove informacije će vas unaprijediti u učenju HTML jezika.

Šta je hiperveza i može li se nazvati linkom?

Odgovarajući na pitanje postavljeno u naslovu, reći ću da pojam „link” ima širi semantički spektar (veza sa Sibirom, bankarstvo za identifikaciju platitelja, tekst u knjizi, itd.), uključujući i značenje inherentno pojmu “hiperveza” , koja je povezana samo s hipertekstom, što omogućava nelinearnu percepciju informacija.

dakle, hiperveza je poseban slučaj veze, pa ih je sasvim moguće ravnopravno koristiti u današnjim temama. Ovo je ono što ću koristiti u svoju korist u današnjem postu, koristeći oba termina kako bih izbjegao nepotrebnu neželjenu poštu ključnih riječi.

Ali postoje i nevidljivi servisi, kreirani pomoću i smješteni unutar, čiji je zadatak slanje brojnih signala i komandi pretraživačima za obavljanje određene funkcije.

Na primjer, korištenjem servisnih hiperveza moguće je prikazati ikonu. Mogu se vidjeti samo kao dio HTML koda (da biste to učinili, kliknite na bilo koju stranicu otvorenu u pretraživaču):


Za sada, ostavimo servisne veze na miru i razmotrimo opći obrazac kreiranja hiperveza. Zajedničko im je da svi imaju potreban href atribut, čija je vrijednost adresa dokumenta (). HTML veza može voditi ili na internu stranicu stranice ili na vanjski dokument.

Još jedna važna napomena. Upotreba atributa href čini hiperveze klikabilnim, odnosno omogućava korisnicima da automatski odu na odgovarajuću stranicu web stranice kao rezultat klika na njih.

Kako napraviti hipervezu u HTML-u koristeći href

Dakle, već znamo da su za kreiranje veze potrebni a tag i href atribut, čiji parametri mogu biti URL-ovi različitih tipova. Jer a ovo, zatim između otvora i zatvaranje sadrži sadržaj koji će biti prikazan na web stranici.

Ovo sadržaj se naziva sidro i može se predstaviti u obliku teksta ili slike (više ćemo o tome kako napraviti sliku kao link u nastavku). Kao što sam već napomenuo, sidro će se moći kliknuti. Pogledajmo primjer hiperveze s tekstualnim sadržajem. Ovako će izgledati njegov dizajn u HTML kodu:

malo o sidrima

Osim HTTP-a, može se koristiti i siguran HTTPS protokol. Link ne mora voditi na web stranicu. Sve zavisi od href vrijednosti, koja može biti putanja do nekog fajla:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

preuzimanje

Na web stranici ovaj link će imati sljedeći oblik:

Pregledač „razumije“ da objekat sa ekstenzijom .zip može biti namijenjen samo za preuzimanje, što je ono što se od korisnika traži.

Usput, put do bilo koje datoteke ponekad je naznačen preko FTP(). Zatim u URL-u koji se koristi kao parametar atributa href, trebate jednostavno zamijeniti HTTP protokol (HTTPS) sa FTP. Link fajla će izgledati ovako:

preuzimanje sa servera

Ali to nije sve. Isto tako e-mail veza se kreira pomoću mailto pseudo-protokola Za brzi pristup alatu za pisanje slova:

pisati pisma

Nakon klika na takvu vezu, trebao bi se pojaviti prozor zadanog email klijenta u kojem možete sastaviti tekst poruke i poslati je na već navedenu adresu, preuzetu, kao što ste vjerojatno pretpostavili, iz href.

U praksi, hiperveze na poštu su vrlo često ranije koristili webmasteri i vlasnici velikih resursa kako bi osigurali pogodnost korisnika i klijenata koji su mogli pristupiti obrascu pošte jednim klikom.

Ali ova vrsta komunikacije na web resursima više nije toliko popularna (pogotovo što se može instalirati, na primjer), jer e-mail adrese otvorene na ovaj način aktivno presreću softver i koriste ih razne vrste spamera.

Kao primjer sam naveo samo najčešće protokole koji su dio URL-a, koji je, pak, parametar href atributa prilikom formiranja hiperveze. Osim HTTP-a (HTTPS), FTP-a i mailto-a, postoje i drugi za rješavanje specijaliziranijih problema. Možda ćemo ih detaljnije pogledati u drugim publikacijama.

Vrste hiperveza

Pokušajmo sada klasificirati linkove prema određenim kriterijima.

Prema njihovom obimu:

1. Eksterni— vode do stranica koje se nalaze izvan stranice na kojoj su postavljene;

2. Domaći— povežite web stranice koje se nalaze unutar istog web resursa.

Po formatu:

2. Grafički e - u ovom slučaju, sidro hiperveze je slika (uključujući sličicu), baner, dugme itd.

Po vrsti URL-a koji služi kao vrijednost href atributa:

1. Apsolutno, koji sadrže eksplicitnu naznaku protokola za prijenos podataka (na primjer, HTTP) i naziv domene stranice (u svemu o domenima).

Takvi linkovi se najčešće koriste kada se upućuju na stranice vanjskih izvora. U ovom slučaju, vrijednost href će uključivati ​​punu putanju do željene datoteke ili web stranice. Evo primjera apsolutne hiperveze:

Kontekst - šta je to?

2. Relativno, jedna od opcija za kreiranje koje će biti putanja navedena u odnosu na korijensku mapu web stranice (otuda i naziv ove vrste hiperveze). U ovom slučaju, protokol (HTTP) i domena stranice bit će uklonjeni iz URL-a:

Kontekst - šta je to?

Relativne hiperveze na web stranici mogu pružiti veze ka internim stranicama. U ovom obliku su kraći, što olakšava HTML kod. Naravno, sve nije tako jednostavno, i zahtijeva širu pokrivenost, što možete vidjeti ako pratite navedeni link.

Atributi oznake a

Sada da vidimo koji drugi atributi postoje, osim potrebnog href, i kako mogu uticati na kreiranje hiperveze. Najpotpunije podatke u tom pogledu, da tako kažem, „iz prve ruke“ možete pronaći na službenoj web stranici Međunarodnog W3C konzorcija, gdje se ažurirane informacije pojavljuju najbrže.

Potpuno su identični i pokreću otvaranje web stranice u trenutnoj kartici. Ako želite da se stranice otvaraju u novoj kartici kada kliknete na linkove, onda biste trebali dodati kada kreirate vezu ciljni atribut s praznim parametrom:

Kontekst - šta je to?

Iako neki webmasteri i SEO stručnjaci smatraju da je bolje da se posjetitelju pruži mogućnost izbora (odnosno, ne navodi ciljni prazan prostor), jer ako je potrebno, stranica se može otvoriti u novoj kartici pomoću kontekstnog izbornika (premjestiti kursor na vezu, kliknite desnim tasterom miša i kliknite na odgovarajuću tačku):


Štaviše, kao što vidite, u ovom slučaju korisnik ima prednost što je moguće otvoriti web stranicu ne samo u novoj kartici, već i u novom prozoru(ova opcija se ne može implementirati putem HTML-a, samo pomoću skripti).

Ali vjerujem da nisu svi korisnici početnici u potpunosti upoznati s mogućnostima i postavkama popularnih preglednika (). Vrlo je vjerovatno da će čitalac, nakon što je pratio eksternu hipervezu i izgubio iz vida izvornu stranicu (umjesto toga će se pojaviti dokument primatelja), jednostavno frustrirano zatvoriti karticu.

Dakle, vlasnik web resursa ne samo da može izgubiti perspektivnog posjetitelja, već i dobiti pogoršanje faktora ponašanja (), što će dovesti do gubitka pozicije stranice u rangiranju.

Osim toga, otvaranje stranice u susjednoj kartici vrlo je zgodno sa stanovišta upotrebljivosti (). Korisnik prati hipervezu na web stranicu, prima dodatne informacije i, kao da se ništa nije dogodilo, nastavlja proučavati glavni materijal.

Da bi se stvorila objektivna slika, treba dodati da se ispostavlja da je primjena “target="_blank"” na bilo koje vanjske veze prepuna određenih sigurnosnih rizika. Ako nekoga zanima, možete pročitati gdje su date preporuke za rješavanje problema pri korištenju target blanka, kao i alternativne opcije za implementaciju zadatka otvaranja web stranice u novoj kartici.

Čini se da sam zabilježio sve prednosti i nedostatke korištenja prazne vrijednosti za otvaranje hiperveze u novoj kartici. Ako čitate članke na mom blogu, vjerovatno ste već pogodili moj stav prema ovom parametru ciljnog atributa.

Trenutno, njegove prednosti su za mene veće od mana, a ja sam bezuslovni navijač. Na osnovu gore navedenih činjenica, možete formirati svoje mišljenje o ovom pitanju. Iako... s obzirom na pojavu novih okolnosti, može se promijeniti.

Kako kreirati hash linkove, sidra i zašto su oni potrebni?

Zatim bih želio da vam skrenem pažnju na još jednu vrstu hiperveza, koje mogu biti korisne ako je materijal koji se nalazi na web stranici prilično obiman i treba ga strukturirati tako da poboljša navigaciju.

Ne morate daleko tražiti primjer, samo pogledajte sadržaj ove publikacije na samom početku. Vidite li da postoji lista dijelova članka? Hiperveze ka ovim sekcijama su samo heš veze. Nakon što kliknete na bilo koji od njih, pretraživač će pomeriti stranicu do mesta gde počinje odgovarajući deo.

Takve veze se kreiraju prilično jednostavno. Prvo morate kreirati sidro postavljanjem odgovarajuće oznake na potrebno mjesto na stranici u obliku ID-a, koji je jedan od globalnih atributa koji se primjenjuje na bilo koju HTML oznaku.

Zahvaljujući univerzalnosti ID-a, takve oznake sidra mogu se instalirati gotovo bilo gdje na web stranici. Budući da je tekst obično podijeljen na pasuse, oni se mogu primijeniti i na . Uglavnom postavljam sidra pomoću kojih se članci dijele na logične dijelove:

Nakon što smo označili sva potrebna mjesta u HTML kodu, kreiramo hiperveze do njih. Da bismo to učinili, na kraju, nakon posljednje kose crte “/” u URL-u (što je, kao što već znate, vrijednost atributa href), upisujemo redom znak funte “#” i naziv oznake (ID ):

Kako formirati hash veze i sidra?

Štaviše, ako je takva veza sidra postavljena na istoj stranici kao i sidra, tada se dio URL-a do i uključujući posljednju kosu crtu prije heša može izostaviti i samo “#” plus naziv ID-a se koristi kao href parametar (u suštini, ovo je jedna od opcija za relativne veze):

Kako formirati hash veze i sidra?

To jest, kada sastavljate sadržaj za priručnik za optimizaciju HTML koda, možete lako koristiti ovu laganu opciju. Ako stavite samo jedan hash znak kao URL, bez naziva identifikatora, tada će se od mjesta gdje se nalazi takva veza stranica pomicati do kraja:

Top

Zapravo, ovo je najjednostavnija opcija, koja opet služi kao dodatna prednost za upotrebljivost resursa, jer svojim posjetiteljima olakšava život. Možete koristiti atraktivnu sliku kao sidro za kreiranje dugmeta.

Kako ukloniti podvlačenje i promijeniti boju veze

HTML programeri su razmislili o gotovo svim nijansama koje mogu pomoći u optimizaciji ovog ili onog aspekta, isto se odnosi i na hiperveze. Na primjer, nakon hiperveze do druge web stranice i vraćanja nazad, korisnik će vidjeti da je hiperveza promijenila boju.

Ako treba ponavljati takve radnje više puta, moći će brzo odrediti na koje je linkove već kliknuo, a na koje nije. Ova opcija je uključena u skoro svaki pretraživač. Ne treba objašnjavati koliko je ovo zgodno i koliko štedi vremena.

Zadane i ne-CSS hiperveze istaknuto podvlačenjem i tri opcije boja, od kojih svaki ima svoj vlastiti atribut za:

  • link - postavlja boju hiperveze na web stranici (plava po defaultu, koja je označena #0000ff);
  • alink — boja aktivne hiperveze za vremenski period dok je obrađuje web pretraživač (crvena #ff0000);
  • vlink — boja veze koju je korisnik posjetio (ljubičasta, #800080).

Kako možete promijeniti boje linkova koje pretraživači prikazuju za vašu stranicu? Pa, za jednostavnu HTML stranicu na kojoj se stranice kreiraju ručno (a mislim da u modernoj stvarnosti praktički ne postoje potpuno funkcionalni resursi ove vrste, osim možda jednostavnih dnevnika i odredišnih stranica), samo trebate pronaći početnu oznaku i navedite potrebne parametre za njega (usput, možete koristiti njegovo ime da označite boju), na primjer:

Ako ste instalirali sistem za upravljanje sadržajem () za administriranje vašeg web resursa, tada, bez obzira na tip motora koji koristite, morate otvoriti za uređivanje fajla odgovornog za prikaz zaglavlja (header), gdje se nalazi oznaka za otvaranje .

Ako vaš resurs pokreće WordPress, onda da biste praktično implementirali ovu ideju, možete ga koristiti kao alat za automatsko umetanje slike unutar hiperveze, gdje prvo odaberete iz biblioteke ili preuzmete željenu sliku i umetnete je u tekst:

Zatim odaberite rezultirajući kod slike i pritisnite gumb "link" uređivača, nakon čega zalijepite željenu kopiranu hipervezu u prozor koji se pojavi:


Možete lako pronaći mnoge tutorijale na Internetu koristeći pseudo-class:target. Međutim, nemojmo slijediti tuđi kod, već ga pokušajmo razumjeti i razumjeti kako funkcionira? Naravno, ne možemo bez primjera.

Šta je:meta?

U CSS:target, ovo je pseudo-klasa koja vam omogućava da odaberete cijeli “komad” vašeg HTML dokumenta na kojem će se izvršiti neka radnja. To može biti, na primjer, pasus teksta ili naslov.

Pseudo-klase ne treba miješati sa pseudo-elementima, koji mogu odabrati samo određeni dio elementa, kao što je prvo slovo ili prvi red pasusa.

Pseudo-klase:

  • a:link(boja:#111)
  • a:hover(boja:#222)
  • div:prvo dijete (boja:#333)

Pseudoelementi:
  • p::prvo slovo(boja:#444)
  • p::prvi red(boja:#555)

Mislim da je iz sintakse jasno šta radi ova ili ona pseudo-klasa ili pseudo-element. Najpopularnija pseudo-klasa je :hover, na nju nailaze svi webmasteri koja opisuje stilove elementa kada lebdi. target radi slično i opisuje stilove elementa kada se dogodi određena situacija.

ID-ovi fragmenata

Ukratko, ovo je stvar za koju je vezana naša pseudo-klasa. Ovo je hashtag sa riječju ili frazom koja se nalazi na kraju adrese. izgleda ovako:

Ova tehnika se može koristiti za prijelaze unutar članka. Na primjer, na početku članka kreirate malu tabelu sadržaja, kada kliknete na element na koji se osoba odvodi u odjeljak do kojeg vodi link.

Radi u čistom HTML-u, nisu potrebni trikovi. Mali identifikatori.

Rukovanje klikom pomoću:target

Sada pokušajmo da se uvjerimo da kada kliknete na željeni odjeljak iz našeg improviziranog izbornika, promijeni se stil naslova, pokazujući koji je pasus trenutno aktivan.

H1 ( font: 30px Arial sans-serif; ) h1:target (font-size: 50px; text-decoration: underline; color: #37aee4; )

Kod je vrlo jednostavan - kada se klikne, naslov mijenja svoju veličinu, boju i podvlači se. Možete dodati život (Ruslan, zdravo) i napraviti animaciju za promjenu boje naslova:

H1 (font: 30px Arial sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-transition: boja 0,5s lakoća; -o-transition: boja 0,5s lakoća; -ms-transition: lakoća boja 0,5s; prelaz: boja 0,5s lakoća )

Isticanje aktivnog naslova je dobra stvar, ali što ako trebate promijeniti dizajn teksta koji slijedi? CSS nam daje ovu priliku. izgleda ovako:

H1:target + p (pozadina: #eaeaea; padding: 10px; )

U ovom slučaju, znak plus znači da stil treba primijeniti na pasus koji slijedi iza naslova. dakle, kada se promijeni aktivno zaglavlje, mijenjamo i dizajn odjeljka sa tekstom koji mu "pripada".

Podrška za pretraživač

Ciljna pseudo-klasa pripada trećem izdanju CSS-a i savršeno je podržana od svih pretraživača osim IE, starijeg od verzije 9. Stoga je ne biste trebali implementirati ako vaša publika koristi ovaj pretraživač. Iako, postoji izlaz - ovo je Selectvizr, JS biblioteka s kojom možete učiniti da IE radi sa CSS3. Samo dodamo skriptu i to je to, radi.

Jedina stvar je, ako ne koristite JQuery ili MooTools, morate ih povezati da bi ova skripta radila. Službena web stranica ima tabelu koja pokazuje koje biblioteke podržavaju šta. Ako ste zainteresovani, pročitajte. Ovo .

Zaključak

Korištenje pseudo klasa može izgledati komplikovano, ali kada shvatite kako funkcioniraju, možete raditi nevjerovatne stvari koristeći samo CSS i ništa drugo. Pseudo-klasa: cilj- odlična potvrda ovoga. Uz njegovu pomoć možete radikalno promijeniti interakciju stranice s posjetiteljem. Gornji primjer je najjednostavniji, ali dodaje malo interaktivnosti stranici. Ali ovo je samo nekoliko linija koda.

Ne pretjerujte sa ljepotom i podrškom za pretraživače i sve će biti u redu.

ugodan dan

Podrazumevano, kada kliknete na vezu, dokument se otvara u trenutnom prozoru ili okviru. Ako je potrebno, ovaj uslov se može promijeniti ciljnim atributom oznake . Ovaj atribut nije dozvoljen u XHTML-u.

Sintaksa

...

Obavezni atribut

Vrijednosti

Vrijednost je ime prozora ili okvira navedenog atributom name. Ako je postavljeno nepostojeće ime, otvorit će se novi prozor. Sljedeća imena se koriste kao rezervirana imena.

Prazno Učitava stranicu u novi prozor pretraživača.

_self Učitava stranicu u trenutni prozor.

_parent Učitava stranicu u roditeljski okvir ako nema okvira, ova vrijednost radi kao _self.

_top Odbacuje sve okvire i učitava stranicu u punom prozoru pretraživača, ako nema okvira, ova vrijednost radi kao _self. .

Zadana vrijednost

Validacija

Korištenje ovog atributa osuđuje HTML specifikacija

Problemi