Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS2] Test przegladarek
wassago
post 30.09.2003, 08:04:23
Post #1





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

Przeprowadzilem maly test polegajacy na sprawdzeniu jakie przegladarki prawidlowo zinterpretuja kod CSS stric. wedlug specyfikacji CSS2. Wyniki mowia same za siebie dlatego nie bede sie rozpisywal tylko przejde od razu do testu.

kod zrodlowy testowanej strony:
[xml:1:86952c8dfc]
<html lang="pl">
<head>
<style>
[LANG=pl] > * {
font-family: tahoma;
font-size: 11px;
background-color: #ffffff
}

h3, h3:after {
display: run-in;
content: ": "
}

q, q:before, q:after {
content: open-quote;
content: close-quote;
font-style: italic
}

div.a:hover {
background: #ebebeb
}

a {
text-decoration: none
}

a[href="http://www.w3.org"] {
text-decoration: none;
color: #ff8040
}

span[osoba="julia"]:before {
display: block;
content: "Julia: ";
font-weight: bold;
color: #ff6699
}

span[osoba="romeo"]:before {
display: block;
content: "Romeo: ";
font-weight: bold;
color: #0099cc
}

.center {
text-align: center
}
</style>
</head>
<body>
<h3>Przykładowy dialog</h3>

<span osoba="julia">oh, Romeo! gdzie jestes?!</span><br />
<span osoba="romeo">ej, ty slepa! spojz w dol...</span><br />
<span osoba="julia">Romeo! tak za toba tesknilam! nie moge zyc bez Ciebie!</span><br />
<span osoba="romeo">no dobra ale jest cos o czym powinnas wiedziec, bo widzisz... okazuje sie, ze jestem homoseksualista...</span><br />
<span osoba="julia">...Romeo!! to wspaniale bo ja Ci nie wspomnialam, ze jestem mezczyzna</span><br /><br />
<div class="center + a">
<br />
<q>Ten tekst jest cytatem. <br />Powinien byc wysrodkowany, pochylony, dwa razy zlamany <br />oraz zaczynac sie i konczyc cudzyslowiem</q>
<br /><br />
</div>
ps. kiedy kursor znajdzie sie nad tym cytetem tlo zmieni kolor<br /><br />
<a href="http://www.w3.org">http://www.w3.org/</a> - (ten link automatycznie powinien miec zmieniany kolor poniewaz jest bardzo dla nas wazny)<br />
<a href="http://www.inny.org">http://www.inny.org/</a><br />
<a href="http://www.inny.org">http://www.inny.org/</a><br />
<a href="http://www.inny.org">http://www.inny.org/</a><br />
</body>
</html>
[/xml:1:86952c8dfc]
ja widzicie nic specjalnego - prosty kod, wszyscy wiemy o co chodzi.

---------------------------------- WYNIKI ----------------------------------

Prawidlowo wykonany kod w procentach:

Mozilla 1.5: 100%
Internet Explorer 6: 16%
Opera 7: 84%

---------------------------------- WYNIKI IMG ------------------------------

Mozilla 1.5


Internet Explorer 6


Opera 7


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
Teodor
post 30.09.2003, 11:06:02
Post #2





Grupa: Zarejestrowani
Postów: 87
Pomógł: 0
Dołączył: 13.04.2003
Skąd: Poznan

Ostrzeżenie: (0%)
-----

fajny test css tylko szkoda ze sama strona niebardzo w standardzie :/

aha Operze nalezy sie troche wiecej - po malej poprawce before tez dziala tongue.gif

A tak wygladalby prawdziwy XHTML 1.0 Strict


[xml:1:a059423baf]
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
[LANG=pl] > * {
font-family: tahoma, sans-serif;
font-size: 11px;
background-color: #ffffff;
}

h3:after {
display: run-in;
content: ": ";
}

q:before, q:after {
content: open-quote;
content: close-quote;
font-style: italic;
}
q {
font-style: italic;
}
div.a:hover {
background: #ebebeb;
}

a {
text-decoration: none;
}

a[href="http://www.w3.org"] {
text-decoration: none;
color: #ff8040;
}

span[class="julia"]:before {
display: block;
content: "Julia: ";
font-weight: bold;
color: #ff6699;
}

span[class="romeo"]:before {
display: block;
content: "Romeo: ";
font-weight: bold;
color: #0099cc;
}

.center {
text-align: center;
}
</style>
<title>CSS Test</title>
</head>
<body>
<h3>Przykładowy dialog</h3>
<p>
<span class="julia">oh, Romeo! gdzie jestes?!</span><br />
<span class="romeo">ej, ty slepa! spojz w dol...</span><br />
<span class="julia">Romeo! tak za toba tesknilam! nie moge zyc bez Ciebie!</span><br />
<span class="romeo">no dobra ale jest cos o czym powinnas wiedziec, bo widzisz... okazuje sie, ze jestem homoseksualista...</span><br />
<span class="julia">...Romeo!! to wspaniale bo ja Ci nie wspomnialam, ze jestem mezczyzna</span><br /><br />
<object>
<div class="center + a">
<br />
<q>Ten tekst jest cytatem. <br />Powinien byc wysrodkowany, pochylony, dwa razy zlamany <br />oraz zaczynac sie i konczyc cudzyslowiem</q>
<br /><br />
</div>
</object>
ps. kiedy kursor znajdzie sie nad tym cytetem tlo zmieni kolor<br /><br />
<a href="http://www.w3.org">http://www.w3.org/</a> - (ten link automatycznie powinien miec zmieniany kolor poniewaz jest bardzo dla nas wazny)<br />
<a href="http://www.inny.org">http://www.inny.org/</a><br />
<a href="http://www.inny.org">http://www.inny.org/</a><br />
<a href="http://www.inny.org">http://www.inny.org/</a><br />
</p>
</body>
</html>
[/xml:1:a059423baf]

Szkoda ze "jedyna sluszna" przegladarka ma az takie problemy... Bo w koncu co z tego ze css oferuje takie mozliwosci jak przez M$ mozemy o tym pisac w ramach "ciekawostki z sieci"...

Pozdrawiam
Go to the top of the page
+Quote Post
wassago
post 30.09.2003, 11:14:35
Post #3





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

oj polonizowalbym... 8) opera nie powinna miec problemu z tym q, q:before, q:after bo wlasnie to jest przyklad zywcem wyciety ze specyfikacji... a co do osoba="" to specjalnie dalem taki znacznik a nie inny aaevil.gif
ps. moze po tym poscie ktos skusi sie zainstalowac jakas alternatywe dla IE :wink:

pozdrawiam


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
Jabol
post 30.09.2003, 19:44:12
Post #4





Grupa: Przyjaciele php.pl
Postów: 1 467
Pomógł: 13
Dołączył: 22.02.2003

Ostrzeżenie: (0%)
-----

http://forum.php.pl/viewtopic.php?t=6164 tam są linki do screenów. dodam, że strona ma kompatybilność z xhtml 11 - strict oraz css2 i pomimo tego co widać na screenie strna wygląda tak samo na interi jak na localu ( patrzcie location na moim screenie ).
dodatkowo są tutaj półprzeźroczyste obrazki png, które też mogą świadczyć o jakości przeglądarek.
tutaj css:
Kod
body {

   background-color: #FFFFFF;

   background-image: url(images/backgr2.jpg);

   background-position: 0 0;

   background-repeat: no-repeat;

    position: relative;

    margin:0;

   padding: 0;

}

div#links {

    position: fixed;

    top: 64px;

    left: 16px;

    width: 170px;

    height: 700px;

    font: 16px Verdana, sans-serif;

}

div#links a {

    display: block;

    text-align: center;

    font: bold 1em sans-serif;

    padding: 5px 10px;

    margin: 0 0 3px;

    border: solid 1px #691d10;

    text-decoration: none;

    color: #691d10;

   background-color: transparent;

   background-image: url(images/link2.png);

   background-position: 0 0;

   background-repeat: repeat;

}

div#links a:hover {

    display: block;

    text-align: center;

    font: bold 1em sans-serif;

    padding: 5px 10px;

    margin: 0 0 3px;

    border: solid 1px #691d10;

    text-decoration: none;

    color: #b1321c;

   background-color: transparent;

   background-image: url(images/link2.png);

   background-position: 0 0;

   background-repeat: repeat;

}

div#content {

    position: absolute;

    top: 32px;

    left: 212px;

    right: 32px;

    color: #691d10;

    font: 13px Verdana, sans-serif;

    padding: 10px;

    border: solid 1px #691d10;

   background-color: transparent;

   background-image: url(images/link2.png);

   background-position: 0 0;

   background-repeat: repeat;

}

div#content p {

    margin: 0 1em 1em;

}

div#content a:link {

    color: #691d10;

}

div#content a:link:hover {

    color: #b1321c;

}

div#content a:visited {

    color: #691d10;

}

div#content a:visited:hover {

    color: #b1321c;

}

div#content h1 {

    margin: -9px -9px 0.5em;

    padding: 15px 0 5px;

    text-align: right;

    background: #691d10;

    color: #FFFFFF;

    letter-spacing: 0.5em;

    text-transform: lowercase;

    font: bold 25px sans-serif;

    height: 28px;

    vertical-align: middle;

    white-space: nowrap;

}

div#content h3 {

    font: bold 15px Verdana, sans-serif;

    margin-bottom: 0.25em;

}
a tutaj xhtml ( index.html )[xml:1:ab97db7282]<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link title="Apple" rel="stylesheet" type="text/css" href="apple.css" />
<link title="Hell" rel="alternate stylesheet" type="text/css" href="default.css" />
<title>Moja strona domowa smile.gif</title>
</head>
<body xml:lang="pl">
<div id="links">
<a href="./index.html">Strona Główna</a>
<a href="./ksiazki.html">Książki</a>
<a href="./zainteresowania.html">Zainteresowania</a>
<a href="./filozofia.html">Filozofia</a>
<a href="./opensource.html">Open Source</a>
<a href="./linki.html">Linki</a>
<a href="./kontakt.html">Kontakt</a>
</div>
<div id="content">
<h1>strona główna</h1>
<h3>Witam</h3><p>
Witam na mojej stronie domowej!<br />
Nazywam się Adam "Jabol" Więckowski.</p>
<h3>O czym jest ta strona?</h3><p>
O niczym biggrin.gif... oraz o mnie, o moich zainteresowaniach i o wolnym oprogramowaniu ( w które mocno wierzę ). Stworzyłem ją bo już od dawna chciałem mieć "homesajta" oraz ze względu na zabawę z CSS ( proszę o ocenę, np. na <a href="./kontakt.html">maila</a> ).<br />
Będą się tutaj pojawiały różne treści według przedstawionego po lewej stronie spisu treści tongue.gif.<br /></p>
<h3>O stronie</h3><p>
O mnie nie będe tutaj pisał, ale w specjalnie do tego celu wyznaczonym dziale, jednak strona takiego nie dostanie, więc chociaż podpunkt tutaj się jej należy winksmiley.jpg.<br />
Strone wykonałem zainspirowany wyglądem <a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html">tej strony</a> oraz możliwościami CSS2.<br />
Więc jest to strona wykonana w technologii XHTML/CSS2 ( do edycji wykorzystałem edytor BlueFish ) przy kodowaniu UTF-8 ( trzeba być nowoczesnym - a jak tongue.gif ). Grafika ( edycja tła oraz podkład pod tekst ) zostały wykonane w Gimpie 1.3. Testowałem ją tylko w Mozilli 1.5 oraz Linksie, ale z tego co słyszałem w innych przeglądarkach ( np. IE sad.gif ) też nie jest wygląda.<br />
Oczywiście zgodnie z ideologią Open Source podczas tworzenia stronki na oprogramowanie nie została wydana ani złotówka winksmiley.jpg.</p>
<h3>Przyszłość strony</h3><p>
Stronę mam zamiar wkrótce przenieść na inny serwer. Jest to ściśle związane z zamiarem przepisania strony na technologię php/baza danych ( marzy mi się PostgreSQL,
ale ... no może się uda uniknąć MySQL'a ). Już mam gotowy szkielet, ale wciąż nie jest to to co bym chciał.<br /></p>
<p style="text-align: center">
<a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>
</div>
</body>
</html>
[/xml:1:ab97db7282]
Go to the top of the page
+Quote Post
wassago
post 1.10.2003, 07:58:43
Post #5





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

Jabol widziales moj wpis w twoim poscie? :wink:
poza tym zgadzam w kwestji tych PNG'kow


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
Krzychur
post 26.01.2004, 08:40:21
Post #6





Grupa: Zarejestrowani
Postów: 214
Pomógł: 0
Dołączył: 3.01.2004
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Nie wiem co tak chwalicie te przegladarki. Dobrze ze mozzila jest lepsza od ie ale czy musicie to ciagle powtarzac. W gruncie zeczy jakbys napisal tom specyfikacje kodu dla ie by wygladalo tak samo i na ie a na mozilli inaczej...


--------------------
http://krcms.com
Go to the top of the page
+Quote Post
Dominik
post 26.01.2004, 14:28:08
Post #7





Grupa: Zarejestrowani
Postów: 339
Pomógł: 0
Dołączył: 17.06.2003
Skąd: Białystok

Ostrzeżenie: (0%)
-----

Cytat
Nie wiem co tak chwalicie te przegladarki. Dobrze ze mozzila jest lepsza od ie ale czy musicie to ciagle powtarzac. W gruncie zeczy jakbys napisal tom specyfikacje kodu dla ie by wygladalo tak samo i na ie a na mozilli inaczej...

1. Nie rob roftla
2. Jesli punkt 1 bedzie spelniony to naucz sie jak sie pisze Mozilla.
3. Nie ma czegos takiego jak specyfikacja kodu jest tylko specyfikacja W3C
4. I wreszcie wlasniwa odpowiedz: Buhaha, a teraz argumenty strony powinny byc pisane nie pod przegladarki tylko pod standard. I tak wlasnie jest w tym wypadku, strona ktora powinna wyswietlac sie w IE nie jest wyswietlana. Dlatego nie rozumiem jak mozna pisac takie rzeczy?


--------------------
101 rzeczy, które można zrobić w Mozilli, a których nie potrafi Internet Explorer
Go to the top of the page
+Quote Post
wassago
post 29.01.2004, 00:34:40
Post #8





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

Cytat
[...]
4. I wreszcie wlasniwa odpowiedz: Buhaha, a teraz argumenty strony powinny byc pisane nie pod przegladarki tylko pod standard. I tak wlasnie jest w tym wypadku, strona ktora powinna wyswietlac sie w IE nie jest wyswietlana. Dlatego nie rozumiem jak mozna pisac takie rzeczy?

po prostu sie nie zna i juz :wink:


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
quiris
post 23.06.2004, 11:13:02
Post #9





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 30.12.2003

Ostrzeżenie: (0%)
-----

Cytat
opera nie powinna miec problemu z tym q, q:before, q:after bo wlasnie to jest przyklad zywcem wyciety ze specyfikacji...

No i Opera nie ma żadnych problemów z tym. A ten przykład ze specyfikacji jest prawidłowy tylko w tym przypadku, gdy content jest aplikowany do pseudoklas :before i :after (zgodnie ze specyfikacją CSS 2.1), ale ponieważ Opera ma eksperymentalne wsparcie dla contentu aplikowanego do wszystkich elementów (opracowywany standard CSS3 będzie prawdopodobnie posiadał tego typu rozwiązania): http://www.opera.com/docs/specs/:
Proposed CSS 3 properties supported by Opera
Note that these properties are at an early stage of development, they may be changed or removed from the specifications at any time. Use them as experimental.
- Experimental support for Media Queries
- content is applicable on all elements, not just on the :before and :after pseudo-elements
- box-sizing
dlatego ten test wygląda tak a nie inaczej w Operze. W tej chwili mogę tylko potwierdzić problem w Operze z konstrukcją a[href="http://www.w3.org"].


--------------------
Pozdrowienia
Robert Błaut » Nie tylko o Operze...
Go to the top of the page
+Quote Post
bigZbig
post 25.08.2004, 09:47:23
Post #10





Grupa: Zarejestrowani
Postów: 740
Pomógł: 15
Dołączył: 23.08.2004
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Cytat(wassago @ 2003-09-30 07:04:23)
---------------------------------- WYNIKI ----------------------------------

<b>Prawidlowo wykonany kod w procentach</b>:

<b>Mozilla 1.5</b>: 100%
<b>Internet Explorer 6</b>:  16%
<b>Opera 7</b>: 84%


Rozumiem, że te wyniki dotyczą tylko i wyłącznie możliwości prawidłowego wyświetlenia kodu, który podałeś. Jak zostało to już wspomniane CSS2 ma wielkie możliwości i ogromny potencjał, ale co z tego jak przeglądarki nie potrafią go prawidłowo zinterpretować np text-shadow (używam Mozilli Firefoxa 9, który też nie potrafi tego wyświetlić). Interpretacja kodu zgodnie z oficjalną specyfikacją powinna być moim zdaniem priorytetem. Różnice w obsłudze pewnych technologi są strasznie irytującym wrzodem. Przeglądarki nawet jeśli obsługują pewne "komendy" to bardzo często z różnym rezultatem. To samo dotyczy JS, a co za tym idzie DHTML. Naszczęście są rozwiązania podobne do biblioteki Alladyn, które ułatwiają pracę projektanta, nie mniej - po pierwsze - są to rozwiązania wymuszone, a po drugie nie są idealne.


--------------------
bigZbig (Zbigniew Heintze) | blog.heintze.pl
Go to the top of the page
+Quote Post
wassago
post 27.09.2004, 10:33:22
Post #11





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----

pokaz no mi palcem w specyfikacji css2.1 atrybut text-shadow! text-shadow to jest wymysl MS tak jak wiele innych atrybutow, ktorych w secyf. nie ma.


--------------------
nouincolor.com | blog.olicio.us
Go to the top of the page
+Quote Post
MP1
post 23.10.2004, 18:08:24
Post #12





Grupa: Zarejestrowani
Postów: 194
Pomógł: 0
Dołączył: 22.09.2003
Skąd: Polska

Ostrzeżenie: (0%)
-----

"height: 1px"

Mozilla wyświetla to jako 2-3px, a opera - 5px lub więcej...


--------------------
COMPMaster: REAKTYWACJA
F3Sonda: gotowe
F3Kartki:
Go to the top of the page
+Quote Post
Aztech
post 23.10.2004, 20:40:33
Post #13





Grupa: Zarejestrowani
Postów: 276
Pomógł: 3
Dołączył: 22.10.2003
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Jeśli chcecie poczyać sobie troszeczke o tym jak to się stało i jak działają jakie przeglądarki (z czym mają problemy z czym nie) to zapraszam do lektury ksiażki
Jeffrey Zeldman - Projektowanie serwisów WWW - Standardy sieciowe

P.S. Nie podaje w jakim wydawnictwie kupiłem żeby nie było pseudoreklamy (Ale dla tych co wiedzą to nazwa zaczyna się na H biggrin.gif)
Go to the top of the page
+Quote Post
bela
post 23.10.2004, 21:25:20
Post #14


Administrator PHPedia.pl


Grupa: Developerzy
Postów: 1 102
Pomógł: 2
Dołączył: 14.09.2003

Ostrzeżenie: (0%)
-----

@Aztech: jeżeli tylko jedno wydawnictwo w polsce to wydaje to z czym się tu kryć?
http://helion.pl/ksiazki/pswsta.htm


--------------------
Dowcipy i Kawały Wycieczki Wczasy - Wyszukiwarka EasyHoliday.pl
Go to the top of the page
+Quote Post
Michał Fikus
post 27.10.2004, 21:51:09
Post #15





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 17.03.2003
Skąd: Wejherowo

Ostrzeżenie: (0%)
-----

Cytat(wassago @ 2004-09-27 11:33:22)
pokaz no mi palcem w specyfikacji css2.1 atrybut text-shadow! text-shadow to jest wymysl MS tak jak wiele innych atrybutow, ktorych w secyf. nie ma.

No cóż, tego nikt oczywiście nie pokaże, gdyż http://www.w3.org/TR/2004/CR-CSS21-20040225/changes.html#q24 wyjaśnia wszystko.

Różnice w interpretacji CSS nie są dla nikogo tajemnicą - wiadoma rzecz od dawna (choć wynik Twojego porównania z chęcią bym obejrzał - niestety już za późno chyba). Dlatego sztuką jest umieć stworzyć stronę zgodną ze standardami, przeglądarkami, a przy tym użyteczną i atrakcyjną.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.06.2025 - 09:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn