Oma CSS Firefoxille ja Chromelle

  • Resolved tapiohuuhaa

    (@tapiohuuhaa)


    6 vuotta, 2 kuukautta sitten

    Haluaisin, että sivuni näkyisivät halutusti ainakin Chromella ja Firefoxilla 1280×800 tablet-laitteella.

    Jos haluaisin niin tehdä, pitäisi luoda selainriippuvaisia ylimääräisiä CSS-tiedostoja. Mikäli olisi paras menetelmä sellaisten luomiseen?

    PS. Suhteellisen fonttikoot rem ja vw toimivat pahasti väärin Google Chromessa. Eivät lähestulkoonkaan suhteudu monesssa tilanteessa oikein BODY-elementille annettuun fonttikokoon. Käytettyyn teemaan on relatiivisilla fonttikoilla aivan mahdotonta luoda määrityksiä, jotka toimisivat halutusti sekä Chromella että Firefoxilla. Chromen relatiivisten fonttikokojen väärin näyttäminen oli suuri pettymys, sillä muuten selaimen CSS-tuki on varsin kattava ja hyvä.

    MS:n selainten ja Safarin kanssa en jaksa lähteä tappelemaan.

    • Tätä aihetta muokkasi 6 vuotta, 2 kuukautta sitten tapiohuuhaa.

    The page I need help with: [log in to see the link]

Esillä 4 vastausta, 1 - 4 (kaikkiaan 4)
  • Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    6 vuotta, 2 kuukautta sitten

    Tämän taidan saada hoidettua Code Snippet avulla PHP:llä:

    $Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
    if($Chrome){
    add_action( ’wp_head’, function () {…

    Laitoin kaikki fonttikokopelleilyt vain Chromelle.

    Moderator Mikko Saari

    (@msaari)

    6 vuotta, 2 kuukautta sitten

    Ei ole hirveän hyvä ratkaisu noin, jos käytössä on minkäänlaista välimuistia – on nimittäin vähän tuurista kiinni, tuleeko välimuistista Chromen CSS:ää vai ei, riippumatta siitä, onko käytössä Chrome vai ei.

    Mitään erityisen luotettavia keinoja tiettyjen selainten kohdalle ei ole, koska esimerkiksi suuri osa CSS-kikoista, joilla kohdennetaan tiettyyn selaimeen, osuvat kaikkiin WebKit-pohjaisiin selaimiin, joita on Chromen lisäksi muitakin.

    Oletko kokeillut tehdä relatiivisia kokoja prosenttimitoilla? Niiden pitäisi tietääkseni toimia varsin luotettavasti.

    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    6 vuotta, 2 kuukautta sitten

    Prosenttiarvot toimivat samalla logiikalla kuin em eli ovat riippuvaisia emoelementistä.

    Kun on hirveän monta kerrosta, ei em tai prosenttiarvoilla koot pysy hallinnassa vaan leviävät käsiin. Ainoa luotettava keino on pikseliarvot, joihin en haluaisi palata.

    Eräs artikkeli suositti rem-arvoa – mutta se nyt vaan ei Androidin Chromella toimi 1280x800px näytöllä oikein vaan toimii joissakin tapauksissa em:n tavoin. Iso fonttikokoero Firefoxiin nähden pääsisältöalueella ja vähän muuallakin.

    Rem ja vw ei pitäisi olla riippuvainen emoelementistä vaan niiden tulisi – teoriassa – liittyä juurielementtiin. Ymmärtääkseni rem liittyy BODYyn ja vw näyttöporttiin, joka on HTML tai BODY, jos HTML ja BODY sama perufonttimääritys. Perusfontiksi määritin ”medium”, josta loput siis pitäisi laskea.

    Seuraavan pitäisi kohdistaa CSS vain Android Chromeen:
    $Android=strpos($_SERVER[’HTTP_USER_AGENT’], ’Android’);
    $Chrome=strpos($_SERVER[’HTTP_USER_AGENT’], ’Chrome’);
    $Vivaldi=strpos($_SERVER[’HTTP_USER_AGENT’], ’Vivaldi’);
    if($Chrome && !$Vivaldi && $Android){

    PS. Vivaldi toimii muuten kuin Chrome, mutta näyttä kapessa ikkunassa sivut väärin. Outoa, sillä sen ”moottori” on Chrome ja periaattessa Vivaldi on vain Chromen päälle laitettu supertehokas käyttöliittymä (käyttöliittymä huomattavasti Chromea kehittyneempi ja joustavampi).

    Tiedän, että selaimet esittäytyvät myös muin selaimina kuin mitä oikeasti ovat. Vidaldi $_SERVER[’HTTP_USER_AGENT’] kertoo olevansa Mozilla, Gecko, Chrome, Safari ja Vivaldi. Ehdot pitää laatia tarkkaan. Koska Fixefox ei esittele olevansa Chrome, joten tuo toimi niin, ettei Firefox lukenut koodia kuten ei Windows Vivaldikaan. Ainakaan minulla Firefox ei koskaan saanut Chromen CSS:ää.

    • Tätä vastausta muokkasi 6 vuotta, 2 kuukautta sitten tapiohuuhaa.
    Thread Starter tapiohuuhaa

    (@tapiohuuhaa)

    6 vuotta, 1 kuukausi sitten

    koska minusta tuo $_SERVER[’HTTP_USER_AGENT’] on toiminut varsin hyvin, katson asian käsitellyksi. Miten sivut näkyvät Microsoftin selaimilla, en välitä siitä, jos ei toimi vanhoilla MS Exprorer -selaimilla. Niitä ei pitäisi enää käyttää.

Esillä 4 vastausta, 1 - 4 (kaikkiaan 4)
  • The topic ‘Oma CSS Firefoxille ja Chromelle’ is closed to new replies.