 [CSS2] Test przegladarek |
| [CSS2] Test przegladarek |
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 (IMG:http://www.lo4.zgora.pl/temp/css_test/css_test_moz15.png) Internet Explorer 6 (IMG:http://www.lo4.zgora.pl/temp/css_test/css_test_ie6.png) Opera 7 (IMG:http://www.lo4.zgora.pl/temp/css_test/css_test_op7.png) |
 |
 
|
 |
|
Post
#2
|
|
|
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 { a tutaj xhtml ( index.html )[xml:1:ab97db7282]<?xml version="1.0" encoding="UTF-8" ?>
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; } <!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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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] |
|
|
|
wassago [CSS2] Test przegladarek 30.09.2003, 08:04:23 
Teodor fajny test css tylko szkoda ze sama strona niebard... 30.09.2003, 11:06:02 wassago oj polonizowalbym... 8) opera nie powinna miec pr... 30.09.2003, 11:14:35 wassago Jabol widziales moj wpis w twoim poscie? :wink:
po... 1.10.2003, 07:58:43 Krzychur Nie wiem co tak chwalicie te przegladarki. Dobrze ... 26.01.2004, 08:40:21 Dominik CytatNie wiem co tak chwalicie te przegladarki. Do... 26.01.2004, 14:28:08 wassago Cytat[...]
4. I wreszcie wlasniwa odpowiedz: Buhah... 29.01.2004, 00:34:40 quiris Cytatopera nie powinna miec problemu z tym q, q:be... 23.06.2004, 11:13:02 bigZbig Cytat(wassago @ 2003-09-30 07:04:23)---------... 25.08.2004, 09:47:23 wassago pokaz no mi palcem w specyfikacji css2.1 atrybut t... 27.09.2004, 10:33:22 MP1 "height: 1px"
Mozilla wyświetla to jako... 23.10.2004, 18:08:24 Aztech Jeśli chcecie poczyać sobie troszeczke o tym jak t... 23.10.2004, 20:40:33 bela_666 @Aztech: jeżeli tylko jedno wydawnictwo w polsce t... 23.10.2004, 21:25:20 
Michał Fikus Cytat(wassago @ 2004-09-27 11:33:22)pokaz no ... 27.10.2004, 21:51:09  |
|
Aktualny czas: 11.10.2025 - 18:12 |
