Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Jak osiągnąć max-width w IE

09 marca 2006

Max-width pozwala ustawić maksymalną szerokość dla elementu - gdy zawartości jest mniej, blok zmniejsza się do niej dopasowując. Jeśli natomiast zawartości jest tyle, że wychodzi poza ustawioną wartość, blok przestaje się rozszerzać zatrzymując na maksimum. W ten sposób można zbudować prosty layout, który będzie dość szeroki, żeby wygodnie pomieścić trzy kolumny, ale na rozdzielczościach DTP nie spowoduje powstania lotniska - nie do przeczytania.

Ale max-width nie działa na IE. Jak tam to zrobić? Skorzystać z jednego z wielu backdoorów jakie sobie MS zostawił.

  1. width: expression(document.body.clientWidth > 901 ? "900px" : "auto");

Nie waliduje się, więc trzeba to ukryć - ale pewnie wiesz jak. ;-) Pamiętaj tylko, że gdy jakimś cudem ustawiłeś layout dla body, to clientWidth zwraca 0 i z metody nici. Ale tak - to działa. Sprawdź sam.

Wartości w wyrażeniu powinny się różnić, aby strona nie zamarzała podczas zmieniania rozmiaru okna.

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 09 marca 2006 o 05:30

Kategorie: CSS, Internet Explorer

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. muzgus 1 09 marca 2006, 09:00

    min-width, max-height i min-height też można w podobny sposób ustawiać?

  2. ta mok 2 09 marca 2006, 10:38

    A nie lepiej po prostu uzyc minmaxa?
    http://doxdesk.com/software/js/minmax.html
    Spokojnie sie waliduje, nie trzeba nic ruszac w CSSie
    A w pszyszlosci, kiedy MSIE7 zacznie obslugiwac minmaxy
    wystarczy zdeaktywawac skrypt (i nawet chyba to jest niekonieczne)

  3. kameowy 3 09 marca 2006, 19:25

    Javascript ktoś może wyłączyć a expressionów w ie nie wyłączysz...
    Btw, złe skorzystanie z tej właściwości może zawiesić przeglądarkę... Zdarzyło mi się niedawno jak próbowałem przeskoczyć brak min-width...
    Zalecam też wrzucić tego expression w komentarz warunkowy ;)

  4. ffreak 4 09 marca 2006, 20:30

    Nie sprawdzałem, ale... czy jeśli JavaScript jest wyłączony to css expressions działają? Przecież to także jest JavaScript.

  5. Riddle 5 09 marca 2006, 22:55

    Ffreak, w Firefoksie wypełnianie formularzy danymi też jest zrobione na JavaScript (dopiero po onload się wykonuje), a przecież jak wyłaczysz JS to nadal to działa, co?

  6. medyk 6 09 marca 2006, 23:09

    expressions niestesty nie działa jak wyłączysz js w ie.. ale ja przynajmniej wychodzę z takiego założenia, że z ie korzystają ludzie technologicznie nie świadomi i tym bardziej nie interesują się grzebaniem w konfiguracji przeglądarki.. (chciałbym zobaczyć statystykę js użytkowników korzystających z ie.. może ktoś wie gdzie można znaleźć ładnie rozpisane statystyki, w których można to obejrzeć?)

  7. Riddle 7 09 marca 2006, 23:23

    A jednak… no nic. Rozwiązanie jest za to bardzo przyjemne. ;) I jak ktoś dodaje JSy jak bozia nakazała to musi poczekać na efekt po onload. To się wykonuje od razu. :P

  8. medyk 8 10 marca 2006, 00:38

    Generalnie przez expressions można wiele rzeczy w ie zemulować.. na przykład pseudoklasy after, before.. czy hover dla elementów innych niż a.. Naprawdę często chyba najlepszy sposób na radzenie sobie z ograniczeniami implementacji css w ie :)

  9. ffreak 9 10 marca 2006, 01:31

    medyk: nie pseudoklasy, a pseudoelementy, jeśli chodzi o :after i :before :-) Tak czy inaczej ciekaw jestem jak to wygląda.. w mojej wyobraźni jawią się spore kawałki kodu potrzebne do czegoś takiego - zupełnie niepraktyczne jeśli chcieć by je użyć w kontekście expression. Masz coś takiego (praktyczniejszego od suckerfisha)?

  10. Bellois 10 10 marca 2006, 20:53

    Ale dlaczego zaraz ukryć? Czymże jest walidator, jak nie narzędziem przeznaczonym _tylko_ dla webmastera?

  11. ffreak 11 10 marca 2006, 21:33

    podobnie uważam jeśli chodzi o CSS. jeśli chodzi o XHTML, to błędy są niedopuszczalne.

  12. Riddle 12 10 marca 2006, 21:44

    Bellois, 3 komentarz może Ci trochę naświetlić sprawę. Do tego powiem Ci, że ze smutkiem, ale jednak, obserwuję, że klienci traktują walidację jako atut swojego produktu. Plus coś co nie jest zgodne ze standardami powinno być ukrywane - chociażby dlatego, że nie powinno mieć żadnego wpływu na rzeczy 100% poprawne.

  13. Puck 13 11 marca 2006, 13:38

    Rid, jeśli będziesz się sluchał klientów... :-P

    Poza tym obsługa błędów w CSS jest opisana i można je robić. ;)

  14. medyk 14 13 marca 2006, 16:32

    ffreak dzięki za korektę.. :)
    Nie potrzeba wielkich kawałków kodu. Przykładowo emulacja pseudoelementu after:

    background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML += '<span>blah</span>');

    i mamy dodaną zawartość. Tutaj background-image jest wykorzystywane tylko do wyprowadzenia javascriptu (można użyć innej właściwości css, choć trzeba pierw wybadać, które się nadają.. przykładowo 'float' zawiesi explorera). Na pewno nie jest to idealna emulacja, ale myślę, że w większości przypadków, załatwi sprawę.
    Emulacja pseudoklasy hover dla czegoś innego niż anchor:

    border:1px solid blue;
    background-position: expression(this.runtimeStyle.backgroundPosition = "0% 0%", this.onmouseover = function() { this.style.borderColor = "red"; }, this.onmouseout = function() { this.style.borderColor = "blue"; });

    I tyle.
    Najlepsza jaką znam metoda podmieniania tekstów obrazkami (http://fecklessmind.com/main/5/definitive-solution-to-image-replacement) z tego właśnie korzysta, zresztą ona mi właśnie podpowiedziała jak przydatne mogą okazać się expressions :)
    Oczywiście można się czepiać, że to javascript, ale naprawdę to jest tylko internet explorer.. absolutna większość będzie miała włączony javascript, a jakość kodu myśle należy pozostawić kwestii jakości przeglądarki ;-)
    Podobnie z walidowaniem css, ja inne pliki podaje eksplorerowi a inne pozostałym przeglądarkom, a walidowanie css'a pisanego pod ie jest myślę trochę absurdalną praktyką ;-)

  15. Gringiel 15 03 stycznia 2007, 19:50

    Gosciu pyta o to samo tutaj: http://www.mowiepopolsku.com/component/option,com_smf/Itemid,87/topic,45.0/#new

    jest to hack w pewnym sensie ale dziala

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.