ugrás a tartalomhoz

Külön css IE és egyéb böngésző számára

Pepita · 2011. Okt. 5. (Sze), 17.54
Üdv mindenkinek!
Az jutott eszembe - de lehet, hogy hülyeség -, hogy a fránya IE ha már úgy kilóg a sorból, kapjon külön css-t. Keresgéltem, találtam egy-két dolgot, majd ezt faragtam belőle:

index.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="hu">
<head>
    
    <title>CSS tili-toli</title>
    <meta content="text/html; charset=iso 8859-2" http-equiv="content-type" />
    <link id="iecss" rel="stylesheet" type="text/css" href="ie.css" disabled />
    <link id="ffcss" rel="stylesheet" type="text/css" href="ff.css" disabled />

    <script language=javascript type="text/javascript">
    <!--
    //Böngészőfüggő stílus:
    function app_version() {
        var ms = navigator.appVersion.indexOf("MSIE");
        ie6 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 6);
        if (ie6) {
            document.getElementById("iecss").disabled=false;
        } else {
            document.getElementById("ffcss").disabled=false;
        }
        //window.alert('Böngésző: '+navigator.appVersion); //Csak control
    }
    app_version(); //Rögtön hívjuk, nem body.onload
    -->
    </script>
    
</head>

<body>
    <div class="probadiv" id="1">
        <p class="probacim">Hozzászólás <q>címe</q></p>
        <p class="probap">ŐŰ Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. ŐŰ  Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. </p>
    </div>
    
    <div class="probadiv" id="2">
        <p class="probacim">Hozzászólás <q>címe</q></p>
        <p class="probap">ŐŰ Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. ŐŰ  Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. Maga a hozzászólás, stb. Maga a
        hozzászólás, stb. Maga a hozzászólás, stb. Maga a hozzászólás,
        stb. Maga a hozzászólás, stb. </p>
    </div>
</body>
</html>
ie.css:

/* ie.css */

body {
    margin: 0;
    padding: 0;
    background-color: yellow;
}

div.probadiv {
    text-align: left;
    margin: 10px;
    padding: 10px;
    width: 450px;
    background-color: rgb(240,111,146);
    border: 4px solid rgb(167,10,54);
    filter: alpha(opacity=75); /* átlátszóság ie */
}


p.probacim, p.probap {
    font-family: sans-serif,arial;
    background-color: rgb(246,167,188);
}

p.probacim {
    font-size: 2em;
    color: rgb(10,17,161);
    font-style: italic;
    margin: 0;
    padding: 0.2em;
    vertical-align: bottom;
}

p.probacim:first-letter {
    font-size: 170%;
    color: rgb(27,35,204);
    font-variant: small-caps;
    font-style: normal;
}

p.probap {
    margin: 0;
    font-size: 1.1em;
    color: rgb(9,14,122);
    padding: 0.2em;
}
ff.css:

/* ff+egyéb.css */

body {
    margin: 0;
    padding: 0;
    background-color: yellow;
}

div.probadiv {
    text-align: left;
    margin: 10px;
    padding: 10px;
    width: 450px;
    background-color: rgb(240,111,146);
    border: 4px solid rgb(167,10,54);
    -moz-border-radius: 16px; /* kerekítés */
    box-shadow: 10px 10px 25px rgb(186,153,200); /* árnyék */
    opacity: 0.75; /* átlátszóság ff */
}


p.probacim, p.probap {
    font-family: sans-serif,arial;
    background-color: rgb(246,167,188);
}

p.probacim {
    font-size: 2em;
    color: rgb(10,17,161);
    font-style: italic;
    margin: 0;
    padding: 0.2em;
    vertical-align: bottom;
}

p.probacim:first-letter {
    font-size: 170%;
    color: rgb(27,35,204);
    font-variant: small-caps;
    font-style: normal;
}

p.probap {
    margin: 0;
    font-size: 1.1em;
    color: rgb(9,14,122);
    padding: 0.2em;
}
Az tetszik ebben, hogy aránylag hasonló végeredményt ad a két "legnagyobb" böngészőben. Amik viszont NEM tetszenek:
- Ha jól figyeltem, letöltődik mindkét css fájl, de csak egyik engedélyezett, másik feleslegesen töltődik le.
- A közös tulajdonságok mindkettőben szerepelnek -> felesleges byteok.
- IE-ben nem tudok egyszerű megoldást a kerekített boxra, ill. az árnyékra. Ez utóbbi fontosabb lenne, de nem szeretnék terjedelmes, mások által írt js-t töltikézni, stb., ha lehet, én szeretném megoldani, egyszerűen.
Ezekhez kérnék instrukciót, remélem, másoknak is hasznos.
Bocs a hosszú forrásokért!
‹ CSS dropdown menu hover elemének pozicionálása CSS fist-child, last-child, nested ›
 ■
1

Az elmélet elfogadható (bár

kuka · 2011. Okt. 5. (Sze), 18.20
Az elmélet elfogadható (bár én nem támogatom), de a megvalósítás úgy rossz, ahogy van.
Használj feltétéles kommentet, az egyszerűbb, JavaScript-független és (egyelőre) megbízható.
- Ha jól figyeltem, letöltődik mindkét css fájl, de csak egyik engedélyezett, másik feleslegesen töltődik le.
Feltétéles komment ezt megoldja.
- A közös tulajdonságok mindkettőben szerepelnek -> felesleges byteok.
Ha a feltétéles komment már megoldotta a feltételes betöltést, ez a szempont megszűnik.
2

Köszönöm, eddig

Pepita · 2011. Okt. 5. (Sze), 20.42
a feltételes comment-ről nem jutott eszembe, hogy 

<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>
is létezik...
Azért nem abban az irányban gondolkodtam.
Az elmélet elfogadható (bár én nem támogatom),

Miért? Te hogy oldod meg? Plusz még a megbízhatóságról... <![if IE8]> is megfelelően műxik?
Hogy lehet (egyszerűen) IE8 alatt árnyékolni, esetleg sarkot kerekíteni?

Köszönöm a linket, tanultam belőle.
3

Te hogy oldod meg?A

kuka · 2011. Okt. 6. (Cs), 09.37
Te hogy oldod meg?
A html5-els.js kivételével sehogy. Világnézetem szerint a tartalom mindenkinek elérhető kell legyen, a díszítés csak azoknak akik igényt tartanak rá. Aki olyan böngészőt használ amely nem támogatja a díszítés bizonyos típusait, az valószínűleg nem kér belőlük. Ezért én nem erőltetem rájuk.

A jelenlegi Explorer verzió, a 9-es, támogatja a border-radius és box-shadow tulajdonságokat.
Plusz még a megbízhatóságról... <![if IE8]> is megfelelően műxik?
Ott még igen. Én konkrétan a Microsoft Drop Conditional Comments in IE10 blogmarkra gondoltam.
4

Köszönöm

Pepita · 2011. Okt. 6. (Cs), 18.11
a segítséget! Azt hiszem inkább igyekezni fogok 1 css-t csinálni, csak az a hülye border-panning-margin-width/height eltérés ne lenne... Tök baromság, hogy nem tudnak a "nagyok" ebben megegyezni.
Mégegyszer köszönöm.
5

A böngészők között annyi a

Hidvégi Gábor · 2011. Okt. 6. (Cs), 18.33
A böngészők között annyi a különbség, hogy IE 8-as verzió alatt az <input type="text">-eknek van alul-felül egy egypixeles margója, ha nagyon pixelpontos akarsz lenni, akkor kell hozzá hack-et gyártani, máshoz semmihez.
6

Most nem találtam meg,

Pepita · 2011. Okt. 6. (Cs), 21.10
hogy hol olvastam, de egyszer én már megettem, hogy IE nem úgy számolja a margin, whidth/heigth, padding, border értékeit, mint a szabvány. Ha jól emlékszem, a border nem számít neki bele a whidth/heigth méretbe, ezért ha van kerete a boxnak, más margin kell neki, mint pl. FF alatt. + a text-indent-et v. a padding-ot is másképp kezelik felsorolásban. (Az egyik "pöttyel" együtt húz be, másik nem.)
Szóval egy kicsit több a különbség...
7

quirks mód

Poetro · 2011. Okt. 6. (Cs), 21.17
Csak quirks mód esetén történik máshogy a számolás. Standard módban (5.5-től asszem) minden ugyanúgy működik, csak mások az alapértelmezett margin/padding értékek. Erre van sok CSS, ami egységessé teszi. Lásd például HTML5 Boilerplate.
8

Köszi! De..

Pepita · 2011. Okt. 6. (Cs), 21.51
A quirks módhoz keresgélnem kell, lehet, hogy tök hülye vagyok, de elsőre kínaiul hangzik. A linkelt lapon rágódnom kell, ott is van amihez specifikációt is olvasgatni kell... Remélem, amit nem tudok, benne lesz a css2 spec-ben. Köszönöm, el leszek vele egy darabig!
9

quirks mód

Poetro · 2011. Okt. 6. (Cs), 22.11
A böngésző akkor lép quirks módba, ha nem adsz meg DOCTYPE-ot. Ha megadsz egyet, akkor a böngésző standard módba lép, és minden szép és jó.
10

Köszönöm!!!

Pepita · 2011. Okt. 6. (Cs), 22.29
Van DOCTYPE, de akkor valószínű hiba is lesz benne. Utánajárok, köszi!
11

Szerver oldal

szabo.b.gabor · 2011. Okt. 6. (Cs), 23.44
ha már bájthuszárkodás és szépség, akkor a feltételes komment is felesleges bájt.

semmi sem gátol abban, hogy szerver oldalon megvizsgáld, hogy milyen böngésző intézte a kérést és ha ie, akkor odadobj még egy css-t, vagy akár teljesen más tartalmat dobj vissza. szerintem.
12

Nem megbízható

Poetro · 2011. Okt. 6. (Cs), 23.53
Csak az a különbség, hogy a szerver oldali ellenőrzés nem megbízható. Azaz akárki hazudhatja magáról, hogy ő bizony IE7, és akkor az oldalad el fog törni, mert valami más CSS-t kapsz. Viszont a conditional comment tényleg csak ott, és akkor fog működni, ha IE7-ről van szó.
16

Ebben igazad van, de...

H.Z. v2 · 2011. Okt. 7. (P), 13.04
Aki elég hülye ahhoz, hogy hamisított headert küld a szervernek és olyan böngészőnek hazudja a sajátját, amelynek képességeivel az nincs felvértezve, akkor (szerintem) meg is érdemli, ha szemetet kap használható oldal helyett.

Általában nem értem, miért jó, ha valaki a headerben más típust küld, mint amilyen valójában van. Régebben sok oldal volt ami közölte, hogy ő csak IE/Netscape alatt működik és nem mutatott semmit, akkor még érthető volt. Manapság nem nagyon látni ilyet, akkor meg mi értelme?
13

Ha már ennyire belejöttünk,

Pepita · 2011. Okt. 7. (P), 11.05
kivettem egy kis részt példának. Megjegyzem: tudom, hogy sok helyen lehetne még szépíteni, méretet csökkenteni, stb. engem inkább a problémák megoldása érdekelne. Valószínűleg a gondot is én okoztam, csak nem tudom, hol. Az éles oldalon mondjuk ki van írva ajánlott böngésző és felbontás (IE8, XGA v. több), de jobb lenne, ha pl. FF alatt is szép lenne.
Kapcsolat.php:

<?php
//include('private/session_01.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="hu">
<head>
    <meta content="text/html; charset="iso-8859-2" http-equiv="content-type">
    <meta name="keywords" content="pepita, Pepita">
    <meta name="description" content="Pepita">

    <link rel="stylesheet" type="text/css" href="main.css">

    
    <title>Pepita</title>
</head>


<body>
    <div class="top" id="topdiv">
        <h1>Valami fejléc</h1>
    </div>
    
    <div class="left" id="leftdiv">
        <ul class="menu" id="menu">
            <li>valami menü 1</li>
            <li>valami menü 2</li>
            <li>valami menü 3</li>
            <li>valami menü 4</li>
        </ul>
    </div>
<!--  -->    
    <div class="content" id="contentdiv">
    
        <h2>Elérhetőségünk</h2>
    <p class="normal" style="text-align: center">
        Ez itt egy cégnév, cégforma
    </p>
    <p class="normal" style="text-align: center">
        1234. Piripócs, Gipsz Jakab u. 123.
    </p>
    <p class="normal" style="text-align: center">
        <a href="http://maps.google.com/maps/...">
        Térkép...</a>
    </p>
        

    <p class="normal">&nbsp;</p>
    
    <div class="balra" id="div1" style="height: 230px; overflow: auto;">
        <img class="left" src="muszerfal.jpg" alt="Egyik ügyvezető" />
        <p class="kapcs1">Egyik Ügyvezető</p>
        <p class="kapcs2">ügyvezető</p>
        <ul class="disc">
            <li>Tevékenység 1 stb. stb.</li>
            <li>Tevékenység 2 stb. stb. stb.</li>
            <li>Tevékenység 3 stb. stb. stb. stb.</li>
        </ul>
        <div class="clear"></div>
        <p class="kapcs2" style="text-align: left;">Mobil: (+36)12/345-6789</p>
<!-- Az alábbi linkhez most nincs itt a js, ami megjelenítse -->
        <p class="kapcs1" style="font-size: 1.2em;"><a onclick="mutat('mail_1');" href="#mail_1">Itt írhat nekem</a></p>
    </div>
        
    <div class="jobbra" id="div2" style="height: 230px; overflow: auto;">
        <img class="left" src="muszerfal.jpg" alt="Másik ügyvezető" />
        <p class="kapcs1">Másik Ügyvezető</p>
        <p class="kapcs2">ügyvezető</p>
        <ul class="disc">
            <li>Tevékenység 1 stb. stb.</li>
            <li>Tevékenység 2 stb. stb. stb.</li>
            <li>Tevékenység 3 stb. stb. stb. stb.</li>
        </ul>
        <div class="clear"></div>
        <p class="kapcs2" style="text-align: left;">Mobil: (+36)12/345-6789</p>
<!-- Az alábbi linkhez most nincs itt a js, ami megjelenítse -->
        <p class="kapcs1" style="font-size: 1.2em;"><a onclick="mutat('mail_2');" href="#mail_2">Itt írhat nekem</a></p>
    </div>
    
    <div class="clear"></div>
    <p class="normal">&nbsp;</p>
    <p class="normal">&nbsp;</p>


<div id="mail_1" style="height: 0px; visibility: hidden; overflow: hidden;">
    
<!-- A form itt nem érdekes -->

</div>


<div id="mail_2" style="height: 0px; visibility: hidden; overflow: hidden;">
    
<!-- A form itt nem érdekes -->
    
</div>


    <p class="normal">&nbsp;</p>
    <p class="normal">&nbsp;</p>
        <a href="#">Lap tetejére</a>
        
    </div><!--  -->
</body>
</html>
Persze élesben a topdiv/leftdiv is "include(akarmi);".
CSS: 

/* Fő stílus */
body {
    background-color: white;
    /* Eredetiben a háttér=keret színe,
    hogy a nem leérő boxok körül is u.az legyen*/
    margin: 0;
    padding: 0;
    border: 4px solid rgb(212,116,119);
    position: absolute;
    height: auto;
    overflow: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
}

div.top {
    background-color: rgb(115,115,230);
    /* Eredetileg háttérkép repeat-el */
    margin: 0;
    padding: 0;
    border-bottom: 4px solid rgb(212,116,119);
    position: absolute;
    height: 72px;
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    z-index: 4;
}

div.left {
    background-color: rgb(115,230,115);
    /* Eredetileg háttérkép repeat-el */
    margin: 0;
    padding: 0;
    padding-top: 77px;/*72px, csak IE8 miatt*/
    position: absolute;
    height: 540px;
    width: 192px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: visible;
    z-index: 3;    
}

div.content {
    background-color: green;
    /* Eredetileg háttérkép repeat-el */
    margin: 64px 0px 0px 192px;
    /*Fent és balra hozzáadtam a "top" és "left" fix méreteit is! */
    padding-top: 8px;
    padding-left: 5px;
    padding-bottom: 8px;
    padding-right: 5px;
    border-left: 4px solid rgb(212,116,119);
    border-bottom: 4px solid rgb(212,116,119);
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: visible;
    z-index: 2;    
}


div.balra {
    background-color: pink;
    /* Eredetileg nincs külön háttere */
    padding: 5px;
    border: 4px solid rgb(12,55,160);
    width: 47%;
    height: auto;
    min-height: 187px;
    overflow: visible;
    z-index: 5;
    float: left;
}

div.jobbra {
    background-color: pink;
    /* Eredetileg nincs külön háttere */
    padding: 5px;
    border: 4px solid rgb(12,55,160);
    width: 47%;
    height: auto;
    min-height: 187px;
    overflow: visible;
    z-index: 5;
    float: right;
}

div.clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

a {
    color: rgb(109,58,162);
    text-align: inherit;
    font-size: inherit;
    font-family: inherit;
}
a:link {
    color: rgb(109,58,162);
    text-decoration: none;
    font-weight: 300;
}
a:hover, a:visited:hover {
    color: rgb(129,68,189);
    text-decoration: underline;
    font-weight: 600;
}
a:active {
    color: rgb(19,208,52);
    text-decoration: none;
    font-weight: 400;
}
a:visited {
    color: rgb(109,98,182);
    text-decoration: none;
    font-weight: 300;
}


p.megjegyzes {
    margin: 0.1em;
    padding: 0;
    border: 0;
    font-family: times new roman;
    font-size: 1em;
    font-style: italic;
}

/*   Leggyakoribb bekezdés:   */
p.normal {
    margin: 0.5em;
    padding: 0;
    border: 0;
    font-family: times new roman;
    font-size: 1.2em;
    font-style: normal;
    text-indent: 1.5em;
    text-align: left;
    font-weight: 500;
}


p.kapcs1 {
    margin: 0.1em;
    padding: 0;
    border: 0;
    font-family: times new roman;
    font-size: 1.5em;
    font-style: normal;
    text-align: center;
    font-weight: 700;
}

p.kapcs2 {
    margin: 0.1em;
    padding: 0;
    border: 0;
    font-family: times new roman;
    font-size: 1em;
    font-style: italic;
    text-align: center;
}

/*   TOP Pepita... felirat:   */
h1 {
    margin: 0.2em;
    padding: 0;
    border: 0;
    font-family: garamond;
    font-size: 1.8em;
    font-weight: 300;
    text-align: center;
    color: rgb(51,211,9);
    font-style: normal;
}

/*   Egyes content-ek főcíme:   */
h2 {
    margin: 0.5em;
    padding: 0;
    border: 0;
    font-family: times new roman;
    font-size: 1.65em;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

/*   Egyes content-ek alcímei:   */
h3 {
    margin: 0.5em;
    padding: 0;
    border: 0;
    font-family: times new roman;
    font-size: 1.3em;
    font-style: normal;
    font-weight: 600;
    text-align: left;
}

/*   "Pöttyös" felsorolás:   */
ul.disc {
    margin: 0.2em;
    text-align: left;
    /* Szerintem itt a "játék": IE pöttyöt is behúzza,
    FF viszont a margin-t sem tartja (IE8, FF6)*/
    text-indent: 1em;
    font-family: times new roman;
    font-size: 1.2em;
    list-style-type: disc;
}

/*   "Karikás" felsorolás:   */
ul.circle {
    margin: 0.2em;
    text-align: left;
    text-indent: 1em;
    font-family: times new roman;
    font-size: 1.2em;
    list-style-type: circle;
}

/*   Kép jobbra lebeg:   */
img.right {
    margin: 0.5em;
    padding: 4px;
    border-color: rgb(191,11,62);
    border-width: 2px;
    border-style: solid;
    float: right;
}

/*   Kép balra lebeg:   */
img.left {
    margin: 0.5em;
    padding: 4px;
    border-color: rgb(191,11,62);
    border-width: 2px;
    border-style: solid;
    float: left;
}
Szóval FF6 alatt a kép melletti pöttyös UL pöttyei belógnak a kép keretén belülre, a szöveg - szemre - u.ott kezdődik, mint IE8-ban. +FF-ben az egész kicsit magasabb, default beállításokkal winXP, XGA, megjelenik a függ. görgetősáv, IE8 alatt még éppen nem.
Ha van ötlet, hogy mit rontottam el, megköszönném.
Nem jöttem rá, hol olvastam - pedig tuti, hogy olvastam - ezt az IE-különbözőséget, de jó lenne tudnom, mert sok mindenre fény derülhetne.
Üdv mindenkinek!
u.i. Miért tördeli ilyen csúnyára Drupal a forráskódokat?
14

Különbségek

Poetro · 2011. Okt. 7. (P), 11.46
Ugye nagyon fontos különbség az alapértelmezett ul / ol / li elemeknél például, hogy máshova kerül a jelölő (list-style-position). Míg egyiknél belülre (inside), másiknál kívülre (outside). Hasonló a helyzet a margin / padding értékekkel, amik szintén különböznek. Ugyanez igaz például a p elemre is. Valamint mások a sormagasságok (line-height). Ha azonos alapokkal akarsz indulni, ahhoz jó egy ilyen reset / normalize CSS, mint amilyen pl. az HTML5 Boilerplate oldalon van.
Miért tördeli ilyen csúnyára Drupal a forráskódokat?

Mit értesz azon, hogy csúnyán? Egyébként ennek semmi köze a Drupalhoz, maximum a CSS-hez és a JavaScript kódhoz, amit a Weblabor használ.
17

Na, ezekre a

Pepita · 2011. Okt. 7. (P), 13.08
különbségekre gondoltam! Hát lehet, hogy én - egyelőre - mégis a két css-re szavazok, feltételesben... Majd ha több időm lesz, talán. Látszik, hogy az a jó megoldás (HTML5 Boilerplate), csak nekem most nincs rá elég időm/energiám/tudásom.
Csúnya tördelésen azt értem, hogy pl. } után nem kezd új sort, pedig beillesztve úgy van. Gondolom, helytakarékosság okán, de én így elég nehezen olvasom mások kódjait.
Köszi a válaszokat.
19

2

Poetro · 2011. Okt. 7. (P), 14.19
Miért pont kettő? Ennél azért sokkal több böngésző van ráadásul a legnépszerűbbet, a Chrome-ot még nem is említetted. És mellette persze ottvan a Safari, Opera is.
20

Nem pont kettő

Pepita · 2011. Okt. 14. (P), 14.08
Bocs, hogy csak most járok erre!
Nem pont kettő, legalábbis azt gondolom, hogy többnyire elég lenne IE és egyéb verzió egy oldal formázásakor. Azt, hogy milyen körökben melyik böngésző a legnépszerűbb, nem igazán tudom. Az én "ismeretségi körömben" inkább kettő, ebből is kb. 80% az IE6...9.
Nincs véletlen valahol egy jó statisztika erről? (Mármint ami a magyar netezők statisztikáit mutatja - és könnyen érthetően.)
21

StatCounter

Poetro · 2011. Okt. 14. (P), 14.19
A StatCounter-nek vannak Magyarországra vonatkozó adatai, ahol jól látszik, hogy a Firefox még mindig 50% körül áll, utána következik a Chrome 30% körül, és utána jön az IE 17% körül. Természetesen vannak más statisztikák is, de az értékek ehhez igen közel lesznek. Egyébként hasznos lenne megismerned a felhasználóid böngészőit, és az oldalad statisztikáira építeni (mert ugye készítesz ilyeneket!?)
23

Nem én készítek,

Pepita · 2011. Okt. 14. (P), 19.01
hanem a szolgáltató... Én ehhez kicsi vagyok, de a tárhely/domain-szolgáltatónak elég tűrhető a stat-ja. Ott - az én webhelyeimen - az IE kimagasló. Köszönöm a linket!
15

1, ugye nem gondoltad

Hidvégi Gábor · 2011. Okt. 7. (P), 12.18
1, ugye nem gondoltad komolyan, hogy egy ilyen hosszú forráskódot majd átolvas valaki?

2, hacsak nincs különösebb okod rá, célszerűbb a stílusdefiníciókat .akarmi formában megadni, mivel ha benne van a tag neve is (div.akarmi), akkor lassabban tudja feldolgozni a böngésző, mert eggyel több feltételt kell kiértékelnie
18

Re 1-2

Pepita · 2011. Okt. 7. (P), 13.17
1, De, gondoltam. Én is olvastam már ilyet itt. Ha van - én nem találtam - kérnék linket ide a WL etikettjéről. Amit tudtam, kivettem a kódból, de mindenképp működő és kipróbált cuccot akartam feltenni, hogy ne legyen "itt úgy műxik - ott nem úgy" effekt.

2, Azért szoktam tag-hez kötni, hogy ne lehessen máshoz használni véletlenül sem. (Ha pl. textarea-ban engedek júzernek pici html kódolást, ne tudjon olyan osztályt p-hez rendelni, ami img-ez van.) De megfontolom.
22

Egyelőre nincs weblabor

Hidvégi Gábor · 2011. Okt. 14. (P), 14.52
Hagyatkozz a józan paraszti eszedre, gondolj bele, hogy mennyi idő egy húszkilométeres kódot átolvasni, értelmezni, átgondolni a megoldást, begépelni, ellenőrizni, elküldeni.

Ha ez az idő rövidebb, mint amennyit te rászánnál arra, hogy másnak segíts, akkor nyilvánvalóan rövidíteni kéne.

Ha te ennél az időnél többet is szívesen rászánnál, hogy másnak segíts ingyen megoldani a problémáját, akkor légy szíves, vedd fel velem a kapcsolatot, mert napi szinten sok-sok ilyen feladattal el tudnálak látni : )
24

no comment

Pepita · 2011. Okt. 14. (P), 19.03
legyen igazad.