Pseudoklasa :fullscreen primjenjuje se na elemente kada je preglednik u načinu rada preko cijelog zaslona. Ovo skriva naslov prozora, adresnu traku, kartice, izbornike i druge standardne elemente i prikazuje preglednik na cijelom zaslonu. Za prebacivanje sa standardnog načina na cijeli zaslon i natrag obično koristite tipku F11.
Da bi pseudoklasa radila, najprije mora biti omogućen prikaz preko cijelog zaslona za pojedinačne elemente pomoću skripti (vidi primjer).
SintaksaSelektor:cijeli zaslon ( ... )
Oznake| Označava vrstu vrijednosti. | ||
| A & & B | Vrijednosti se moraju ispisati navedenim redoslijedom. | && |
| A | B | Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B). | normalno | malim slovima |
| A || B | Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom. | širina || računati |
| Vrijednosti grupa. | [ obrezivanje || križ ] | |
| * | Ponovite nula ili više puta. | [,]* |
| + | Ponovite jednom ili više puta. | + |
| ? | Navedena vrsta, riječ ili grupa nisu obavezni. | umetak? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | {1,4} |
| # | Ponovite jednom ili više puta odvojene zarezima. | # |
:fullscreen function fullScreen() ( var el = document.getElementById("msg"); // Dohvaćanje elementa if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); // Chrome, Opera, Safari else if (el.mozRequestFullScreen) el .mozRequestFullScreen(); // Firefox else if (el.msRequestFullscreen) el.msRequestFullscreen(); // Internet Explorer, Edge else if (el.requestFullscreen(); // Standard ) body ( margin: 0; ) #msg ( padding: 10px; pozadina: #bc7062; boja: #fff; ) #msg:-ms-fullscreen ( pozadina: #6088a5; ) #msg:-webkit-full-screen ( pozadina: #6088a5; ) # msg:- moz-full-screen ( background: #6088a5; ) Stranica se prikazuje u načinu rada preko cijelog zaslona.
Pogledajte na cijelom ekranu!
BilješkaInternet Explorer podržava pseudoklasu :-ms-fullscreen.
Chrome, Opera, Safari podržavaju pseudo-klasu :-webkit-full-screen.
Firefox podržava pseudoklasu :-moz-full-screen.
Pseudoklase za svaki preglednik trebaju biti napisane zasebno, a ne navedene odvojene zarezima.
SpecifikacijaSvaka specifikacija prolazi kroz nekoliko faza odobravanja.
- Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata - Grupa odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
- Predložena preporuka - U ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
- Urednički nacrt (Urednički nacrt) - nacrt verzije standarda nakon izmjena i dopuna koje su izvršili urednici projekta.
- Nacrt (nacrt specifikacije) - prvi nacrt verzije standarda.
U tablici preglednika koriste se sljedeće oznake.
Ovo je uslužni program za uređaje s operativnim sustavom Android koji će vam omogućiti prikaz slike na zaslonu na cijelom zaslonu. Drugim riječima, uz njegovu pomoć možete sakriti gumbe sustava koji se nalaze na dnu zaslona i statusnu traku sa zaslona i ispuniti ovaj prostor s većom upotrebom.
Naravno, za izvođenje takvih manipulacija bit će potrebno imati root korisnička prava. Pitanje koje se odmah postavlja je kako koristiti pametni telefon u ovom slučaju. Ali ovdje je sve promišljeno. Na primjer, obavijesti koje se obično nalaze u statusnoj traci bit će prikazane u malim skočnim prozorima.
Odmah nakon aktivacije aplikacije, u kutu ekrana će se pojaviti mali gumbi. Oni će postati zamjena za sve elemente skrivene sa zaslona. U postavkama aplikacije možete odabrati njihovu veličinu, boju, količinu, kao i lokaciju. Kada dugo pritisnete ove gumbe, izvršit će se funkcija postavljena u postavkama, odnosno prikazivanje ploče s obavijestima, prikazivanje obavijesti, otvaranje izbornika, početna stranica, povratak i tako dalje.
ZAKLJUČAK: Ovo će vam biti korisno ako ne volite crne trake pri dnu i vrhu zaslona. U isto vrijeme, i dalje ćete imati priliku puna upotreba pametni telefon. Međutim, hoće li vam biti tako zgodno kao što je bilo prije, odlučit ćete tek nakon što ga sami isprobate. Sve ove promjene mogu se jednostavno poništiti putem aplikacije.
Odgovara svakom elementu koji je trenutno u načinu rada preko cijelog zaslona. Ako je više elemenata stavljeno u način rada preko cijelog zaslona, ovime se odabiru svi.
Sintaksa: cijeli zaslon Napomene o korištenjuPseudo-klasa:fullscreen omogućuje vam da konfigurirate svoje tablice stilova za automatsku prilagodbu veličine, stila ili izgleda sadržaja kada se elementi prebacuju naprijed-natrag između prikaza preko cijelog zaslona i tradicionalnih prezentacija.
PrimjerU ovom primjeru, boja gumba mijenja se ovisno o tome je li dokument u načinu rada preko cijelog zaslona. To se radi bez potrebe za posebnom primjenom promjena stila pomoću JavaScripta.
HTMLHTML stranice izgleda ovako:
MDN Web Docs Demo: :fullscreen pseudo-class
Ovaj demo koristi pseudoklasu :fullscreen za automatsku promjenu stila gumba koji se koristi za uključivanje i isključivanje načina rada preko cijelog zaslona, u potpunosti koristeći CSS.
Uključi/isključi cijeli zaslonS ID-om "fs-toggle" mijenjat će se između blijedocrvene i blijedozelene ovisno o tome je li dokument u načinu rada preko cijelog zaslona.
CSSČarolija se događa u CSS-u. postoje dva pravila ovdje. Prvi uspostavlja boju pozadine gumba "Prebacivanje na cijeli zaslon" kada element nije u stanju cijelog zaslona. Ključ je korištenje:not(:fullscreen) , koji traži da element nema primijenjenu pseudoklasu:fullscreen.
#fs-toggle:not(:fullscreen) (boja pozadine: #afa; )
Kada dokument je u načinu rada preko cijelog zaslona, umjesto toga primjenjuje se sljedeći CSS, postavljajući boju pozadine na blijedu nijansu crvene.
#fs-toggle:fullscreen (boja pozadine: #faa; )
Tehnički podaci| API za cijeli zaslon Definicija ":fullscreen" u toj specifikaciji. |
Životni standard | Početna definicija. |
Tablica kompatibilnosti na ovoj stranici generirana je iz strukturiranih podataka. Ako želite doprinijeti podacima, pogledajte https://github.com/mdn/browser-compat-data i pošaljite nam zahtjev za povlačenje.
Ažurirajte podatke o kompatibilnosti na GitHubu
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome za Android Firefox za Android Opera za Android Safari na iOS-u Samsung Internet | |||||||||||
| Chrome Puna podrška 71 Puna podrška 71 Puna podrška 15 :-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv | Edge Potpuna podrška 12 | Firefox Potpuna podrška 64 Potpuna podrška 64 Nema podrške 47 - 65 Onesposobljeno Onesposobljeno:-moz-full-screen">Zamjenski naziv :-moz-full-screen">Alternativno ime | IE Potpuna podrška 11 Prefiksiran Puna podrška 11Prefiksiran Prefiksiran Implementirano s prefiksom dobavljača: -ms- | Opera Puna podrška 58 Puna podrška 58 Puna podrška 15 :-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv Koristi nestandardni naziv: :-webkit-full-screen | Safari puna podrška 6 :-webkit-full-screen">Zamjenski naziv Puna podrška 6:-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv Koristi nestandardni naziv: :-webkit-full-screen | WebView Android Potpuna podrška 71 Potpuna podrška 71 Potpuna podrška 37 :-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv Koristi nestandardni naziv: :-webkit-full-screen | Chrome Android Potpuna podrška 71 Potpuna podrška 71 Potpuna podrška 18 :-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv Koristi nestandardni naziv: :-webkit-full-screen | Firefox Android Potpuna podrška 64 Potpuna podrška 64 Nema podrške 47 - 65 Onesposobljeno Onesposobljeno Od verzije 47 do verzije 65 (ekskluzivno): ova se značajka nalazi iza postavke full-screen-api.unprefix.enabled (potrebno je postaviti na true). Za promjenu postavki u Firefoxu, posjetite about:config.:-moz-full-screen">Zamjenski naziv :-moz-full-screen">Alternativno ime Nema podrške 9 - 65 | Koristi nestandardni naziv: :-moz-full-screen :-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv Koristi nestandardni naziv: :-webkit-full-screen | Opera Android Puna podrška 50 Puna podrška 50 Puna podrška 14 | Safari iOS Nema podrške Br :-webkit-full-screen">Zamjenski naziv :-webkit-full-screen">Zamjenski naziv Koristi nestandardni naziv: :-webkit-full-screen |
| Odaberi sve elemente na hrpi preko cijelog zaslona | Chrome Nema podrške Br | Rub bez potpore 12 - 79 | Firefox Puna podrška 43 | IE Potpuna podrška 11 | Opera Nema podrške br | Safari Nema podrške Br | WebView Android Nema podrške Br | Chrome Android Nema podrške Br | Firefox Android Puna podrška 43 | Opera Android Puna podrška 50 Puna podrška 50 Puna podrška 14 | Opera Android Nema podrške Br |