Ramki bez ramek

17 Feb 4:11 pm


Original: http://fu2k.org/alex/css/frames/

Wprowadzenie
Uwaga

Ta metoda nie działa w IE6 w określonych okolicznościach – zobacz sekcję kompatybilności dla więcej informacji.
Przegląd

Ta seria stron pokazują, jak odtworzyć wszystkie dobrodziejstwa klatek z nie znacznika ramki w oczach. Aby źródłem twoich elementów może być semantycznie i pedantycznie logiczne jak chcesz i możesz użyć pikseli, EMS lub procentów je umieszczać. Zasadniczo metoda ta emuluje ustaloną pozycję i połączenie górnej i dolnej, lewej i prawej nieruchomości w IE, które jak każdy Fule wie, są rozkładane w warunkach normalnych.

Tak, tak, wiem – chcesz dostać się do Nitty Gritty, ramy faktyczne bez rzeczy ramek. Wystarczy nosić ze mną chociaż. Strona ta zawiera wyjaśnienie, w jaki sposób ten ewoluował, pół sercem “Nadchodzi część nauki”, a podział, które przeglądarki to jest bezpieczne do stosowania tej metody z.

Inspiracja

Byłem knuckling dół, aby wszystko śpiew, wszystko tańczy demo wykładając cuda duch Erica Bednarz jest w pudełku od hack na pytanie “W jaki sposób można produkować klatek, jak wyniki w CSS?” Jest to często zadawane pytanie na css-dyskutować, kiedy natknęliśmy się po drugiej stronie 2002 demo, Edwardson Tan (Kolumny Galaxies), który przeszedł długą drogę do acheiving znacznie ten sam efekt, ale z pozycjonowanych absolutnie div. Jak perused kod Edwardson jest, przypomniałem przełomowe max szerokości Svena Tofte się wyrażeń w IE, i nagle zobaczyłam światło. Te strony są wynikiem tego szczęśliwego kongruencji.

Struktura

Ach tak. Nadchodzi część nauki.

Prolog xml (to śmieszne tag patrząc na samej górze -) jest niezbędny dla IE6 wyświetlane poprawnie – może to być możliwe do wykonania bez niego ale nie może być jedno, aby dowiedzieć się, że z [1]. Oznacza to, że IE6 działa w trybie quirks. Na jasne strony jednak, że oznacza to, że nie trzeba karmić różne wartości do różnych wersji IE. (Dziwnie, kiedy te same techniki są stosowane do ducha w metodą skrzynki, musimy być w trybie standardowym i tak musi opuścić out prologu).

Wszystkie elementy, które działają jako ramek (w tych przykładach wszystkie są DIV wierny) powinna być absolutnie pozycjonowane i mieć ich własność overflow ustawiona na auto (chyba że wiesz, że zawartość elementu nie będzie przekraczać rozmiaru elementu).

Następną rzeczą jest ustawienie ciała autoprzelewanie do hidden – teraz wszystkie elementy pozycjonowane absolutnie pozostanie na swoim miejscu, tak jakby były ustawione na naprawy. Jak na razie dobrze, a nie tak bardzo różni się od dema wspomniano w inspiracji krótką.

Sztuczka polega na użyciu górnej i dolnej, prawej i lewej właściwości w połączeniu – nowoczesne przeglądarki prostu zrobić dobry uczynek i uporządkować wysokości automatycznie. To jest naprawdę proste.

Wyjątkiem, że nie jest. To nie działa w IE – jeśli górnej lub lewej właściwości są ustawione, to dolne i prawo własności odpowiednio ignorowane.

Prawdziwy trik (oprócz jednej wspomnianej już) jest użycie właściwości dynamiczne, aka wyrażeń.

“Ale na pewno”, to protest “wyrażenia nie potwierdzić?” Masz rację – ale nie ma nic, aby zatrzymać nas wprowadzenie odpowiednich selektora lub stylesheet deklaracji w komentarzach warunkowych IE. Więc to jest dokładnie to, co robimy.

Weźmy prosty przykład. Jeśli mamy div # foo i ma to być 200 pikseli szerokości, być umieszczone w lewym górnym rogu i zaniedbany całą lewą stroną do dołu, a następnie następujące oświadczenie, co jest potrzebne dla tych “współczesnych”:

# Foo
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
overflow: auto;
}

Teraz musimy dodać następującą deklarację, że tylko wersje PC w IE można zobaczyć:

# Foo
{
wysokość: wyrażenie (document.body.clientHeight + “px”);
}

document.body.clientHeight jest wysokość rzutni, więc to, co robimy jest mówienie IE do położenia div na samej górze rzutni i sprawiają, że wysoki jak rzutni.

Całkiem proste, prawda? Ale co div # bar, że chcemy zajmować 50 pikseli od góry do 100 pikseli od dołu, a od 75 pikseli na lewo do 150 pikseli na prawo? To jest nasz punkt wyjścia:

Bar #
{
position: absolute;
top: 50px;
bottom: 100px;
left: 75 pikseli;
right: 150px;
overflow: auto;
}

Ponownie musimy dodać dodatkowe oświadczenie, że tylko wersje PC w IE można zobaczyć:

Bar #
{
wysokość: wyrażenie (document.body.clientHeight – (50 + 100) + “px”);
width: wyrażenie (document.body.clientWidth – (75 + 150) + “px”);
}

Oznacza to, że wysokość wysokość widoku minus górne i dolne wartości sumowane. Szerokość działa się dokładnie w ten sam sposób, ale z wartościami lewego i prawego odjąć od szerokości wycinka jest. (Oczywiście, można napisać 50 + 100 za 150 – Mam tylko zrobić to w ten sposób, że wyraźnie o co chodzi)

Mac IE5 jest dziecko jednak problem (i osobiście mój wybór na wyróżnienie nowego Netscape 4), ponieważ to sprawia, że ​​stare prawo mieszania z przepełnienia, gdy określony wysokość nie została określona. Fix jest stosunkowo błahy choć – aby strona tradycyjnej ciągłej scroller for Mac IE5 poprzez hamowanie ciała przepełnienie: ukryte i absolutnie nie pozycjonowanie # content i # footer. Sprawdzić kod – zobaczysz co mam na myśli.

Na kolejnych stronach, zobaczysz, jak korzystać z EMS i procentów jako jednostkę wyboru powinny chcesz. Zobaczysz również, jak możemy następnie ponownie wnioski wyciągnięte tu do tradycyjnego ducha w hack box i odzyskać utracone punkty użyteczności w absolutnie pozycjonowane metodą, ale nie wiesz, stracić kilka innych w tym procesie.

“Ramki” zazwyczaj mają przestrzenie między nimi, aby pokazać bardziej wyraźnie, jak dokładnie są one umieszczone, ale fragmenty powyżej to cała sprawa. To jest naprawdę proste.

Zgodność

Pracuje w IE6 (ale patrz niżej), IE5.5, IE5.01, Firefox 0.8, Mozilla 1.6, Safari 1.1, Opera 7.23, Opera 7.5.

Z powodu problemów z jak Mac IE5 interpretuje wysokości, strony te zostały w większości demo hacked umożliwić Mac IE5 zachowywać się jak zwykły stronie ciągłego przewijania.

Opery 5 i 6 nie zdało egzaminu (z wyjątkiem stałych wersji), ale CSS mogą być łatwo dostosowane do ich zachowują się tak samo jak Mac IE5. Lub nie w zależności od przypadku.
Zgodność IE6 pod XP2

Najpoważniej, metoda ta wzrosła z Rock Solid do znacznie mniej imponujący status tylko częściej pracują w IE6. Kiedy Microsoft wydał XP2, to zmodernizowane IE6 tak że wyrażenia javascript w CSS nie są wykonywane, wtedy i tylko wtedy, gdy strefa, w której strona zamieszkuje na obszarze bezpieczeństwa jest ustawiony na “High”. W większości wersji IE6 ustawienia zabezpieczeń strefy internetowej jest ustawiany na “średnie” i tak ta metoda będzie nadal pracować dla większości użytkowników z IE6. Jednakże, jeśli nie można zagwarantować, że bezpieczeństwo użytkowników nie będzie “High” (np. witryna znajduje się w strefie zaufanej), lub jeśli nie masz nic przeciwko, że niektórzy użytkownicy (wedle wszelkiego prawdopodobieństwa, ludzie za korporacyjnym firewallem) będzie Nie widzę swoją witrynę w zamierzony, nie mogę dłużej zalecamy korzystanie z tej metody. “Czysta” metoda javascript, takich jak Andrew Clover fixed.js, będzie prawdopodobnie lepszym rozwiązaniem.
Tryb zgodności z normami dla IE 6

Właściwie przypomniałem sobie, że wiedział jak to naprawić dla IE6 w trybie standardów cały czas. Jak nadal nie zostały przeszkadza włączyć tę wiedzę do artykułu, mam trzymać go tutaj jako dodatek.

Nieco bardziej skomplikowane wyrażenie jest wymagane, ponieważ gdy IE6 jest w trybie standardowym, zwroty document.body.clientHeight 0 i trzeba użyć document.documentElement.clientHeight zamiast (sytuacja jest odwrotna w trybie quirks). Oczywiście, mniejsze wersje IE nie zwracają wartość, że tak co należy stosować, jest wyrażenie warunkowe, takie jak:

(Document.documentElement.clientHeight document.documentElement.clientHeight: document.body.clientHeight)

Przykładem tego może być widoczne na tej skorygowanej wersji podstawowego układu

Alternatywnie, Leif Olsen napisał mi powiedzieć innego sposób na IE6, aby prawidłowo wyświetlić w trybie standardowym.

Wystarczy dodać, “body {height: 100%;}”, do css. Ponadto trzeba karmić nowego ducha w polu, aby IE6 wyrażeń

Nie próbowałem to samodzielnie, ponieważ nie znajduje wyraz przede zbyt straszne, ale dla tych, którzy nie, pomyślałem, że warto wspomnieć.

Comments are closed