Jak pisać strony Wygodniej czy Dokładniej, Pytania odnośnie różnorodności treści w przeglądarkach internetowych Opcje

[Maxie]

Witam, z góry mówię, że nie wiedziałem gdzie umieścić ten temat. Jeżeli się pomyliłem, nie miejcie mi tego za złe (IMG:style_emoticons/default/smile.gif) .

Tak więc, mam parę pytań odnośnie pisania stron. Skupić się chciałem dokładnie na CSS i JS.
Piszę strony od niedawna. Gdy moja strona zaczęła nabierać kształtów uświadomiłem sobie, że każda przeglądarka może ją widzieć inaczej. I stało się. Szczególnie wyróżniały się wyglądy Czcionek oraz reagowanie na pseudo klasy. Gdy przeglądałem internet w poszukiwaniu odpowiedzi na pytanie "Jak ujednolicić wygląd strony na wszystkich przeglądarkach?" znalazłem parę sztuczek. Prefixy, CSS Framework'i pisane w JS itp. Zastosowałem się do wszystkich Prefixów, Framework'i sobie na razie opuściłem, ponieważ są ponoć jeszcze ludzie na tym świecie, którzy nie używają JS w przeglądarkach.

Starałem się ale nie udało mi się. W IE strona wygląda jakby ją ktoś co najmniej siekierą ciął.

I teraz pytania do Was, na które chciałbym byście mi odpowiedzieli:

• Dbać o użytkowników nie mogących używać/nie używających JS?
• Jak poradzić sobie z IE by nie pisać specjalnej ułomnej wersij strony?
• Jak poradzić sobie z małymi dziwnostkami, typu "dziwnie wyglądające pogrubienie" w innych przeglądarkach niż ta na której sam pracuję?

Co do pkt.1 to znalazłem właśnie świetny Framework JS do CSS. LessCss - chociaż bez obsługi JS, nawet strona projektu wygląda jakby nie miała niczego poza html.
Z góry dziękuję za odpowiedź!

Ten post edytował Maxie 10.03.2013, 22:39:08

[StrefaPi]

Dbać o użytkowników nie mogących używać/nie używających JS?

kto w czasach fb czy podobnych serwisów... iPhonów czy Androidów itd. nie używa javascript? (trzeba zadbać, żaby zabezpieczenia/walidacje itp. nie były jedynie javascriptowe i tyle, ale html5, js czy css3 to podstawa obecnie)

co do lesscss.org - u mnie po wylączeniu javascriptu ta storna wygląda conajmniej jak pisana w wordpadzie

Jak poradzić sobie z IE by nie pisać specjalnej ułomnej wersij strony?

w sensie z IE6? (tą wersje bym sobie darował)

Jak poradzić sobie z małymi dziwnostkami, typu "dziwnie wyglądające pogrubienie" w innych przeglądarkach niż ta na której sam pracuję?

tzw. "pogrubienie fontu" w innych przeglądarkach - występuje tylko przy różnicy mac/pc i jest związane z tym, że mac stosuje tzw. "Subpixel rendering" co pozwala na renderowanie fontu w sposób bardziej dokładny (co często objawia się grubszymi fontami)

co do wyglądu stron pod IE, to jeżeli strona jest zrobiona dobrze (nowocześnie), waliduje się w w3.org, css jest poprawny bez jakiś dziwnych sztuczek (oprócz jakiś resetów padingów, marginesów itp.) to jeszcze nie spotkałem się, żeby inaczej wyglądała np. w Safari, Chromie czy IE...

Ten post edytował StrefaPi 10.03.2013, 22:58:29

[Maxie]

Ostatnie pytanie sobie odpuszczę. Ale wracając do IE.
Dużo ludzi nadal używa IE (nawet tego najnowszego), a nadal pisanie pod to strony jest upierdliwe. Strona za każdym razem wygląda jakby stronę pisała małpa (przykład: margin lewy i prawy ustawiony na Auto wyśrodkowuje, a w IE, nawet najnowszym, często nic się nie dzieje).

[StrefaPi]

dziwne u mnie margin: 0 auto; w IE działa poprawnie (przed chwilą sprawdziłem strony pod IE 9 i IE 10), ogólnie problem występował z wersjami IE do 8 włącznie, czasami coś trzeba było dwa razy napisać, ale ogólnie nie ma tragedii...

Obecnie też są czasem ogromne rożnice w renderowaniu stron, np. Firefox (nawet wersje alfa Aurory) nie pozwalają na ostylowanie "input'u file", też trzeba na około to robić... itd.

Ten post edytował StrefaPi 10.03.2013, 23:09:57

[s1518]

Co do margin left i rgiht na auto, to jeszcze nie problem, bo wystarczy dodatkowo wycentrować bloka i dla starszych IE będzie juz ok - a co najważniejsze w tym, dodanie centrowania nie zepsuje w żaden sposob układu w poprawnych przeglądarkach, więc nie jest konieczne śmiecenie kodu przez stosowanie hackow i innych magicznych sztuczek.

Dla mnie problem zaczyna się wtedy kiedy trzeba załączać oddzielne arkusze stylów w instrukacjach warunkowych dla przeglądarek IE, czasem jest to nieuniknione, ale często nadużywane. Ludzie np. zapominają o zasadach dziedziczenia i wymuszania danego stylu.

Można tak pisać kod, że wiele różnic między starymi IE a resztą świata można dość znacznie zminimalizować. Ograniczać np. stałe szerokości bloków do minimum, nigdy nie dodawać paddingów do stałych zdeklarowanych szerokości blokow itd.
Najbardziej upierdliwy problem w IE 6 są m.in. marginesy przy float right/left - tego nie da się za bardzo w żaden sposób obejść chyba że po prostu nie stosować floatów.

IE6 i IE7 to jeszcze dosc problematyczne przeglądarki, IE8 poza tym, że nie wspiera CSS3 to juz całkiem przyzwoity browser.
Ale aktualnie nie ma się co martwić IE poniżej 8 (dla polski: http://www.ranking.pl/pl/rankings/web-browsers.html).
Najwyżej strać się aby strona była funkcjonalna nawet na strociach ale bez przesady.
Teraz trzeba po prostu promować CSS3 i ogólnie HTML5.

[fizzlebubble]

Jako developer i Mac user przyznaję, iż pogrubione fonty są dość upierdliwe, ale dość łatwe do ogarnięcia, wystarczy wymusić antilising (-VENDOR-font-smoothing: antialiased; ). Kompatybilność na poziomie pixel-perfect do IE7 nie jest problemem. Używaj warunków nadawanych na html (http://www.quirksmode.org/css/condcom.html), które będą dodawać stosowne klasy na tenże znacznik, później wystarczy poprzedzać znacznik ową klasą (.lte8 .foo .bar .foobar). Dla firefoxa,safari i innych do czasów jQuery 1.8.3 stosowało się $.browser dla określenia przeglądarki usera, niestety 1.9.1 już tego nie wspiera.

LESS jest spoko, ale nielepszy byłby SCSS z Compasem? ;-)

Ten post edytował fizzlebubble 22.03.2013, 09:04:52

[!*!]

Dbać o użytkowników nie mogących używać/nie używających JS?

Tak.

Jak poradzić sobie z IE by nie pisać specjalnej ułomnej wersij strony?

Pisanie strony zgodnie ze standardami. Jak Twój kod przejdzie poprawnie przez silnik Presto/Webkit, to o IE nie musisz się martwić.

Jak poradzić sobie z małymi dziwnostkami, typu "dziwnie wyglądające pogrubienie" w innych przeglądarkach niż ta na której sam pracuję?

Używać poprawnych fontów. Verdana, sans-serif ujednolici wygląd na każdej + ewentualny webfont z warinatami lub dopieszczeniem w css.