CSS "best fit" (opera presto)

Web, mail, IRC, IM, hálózatok

régi Presto motoros Operában volt olyan funkció hogy "best fit". amivel az eredeti design szerint túl szélesre húzott weboldalakat (horizontal scrollbar) több-kevesebb "szétesés" mellett ablak-szélességűre varázsolta a böngésző. minden olvasható lett ami kilógott a jobb szélen.

kérdésem, hogy milyen általános CSS szabállyal lehetne ezt imitálni? tehát olyan userstyle stylesheetet szeretnék összerakni, amit bármely (lehetőség szerint minnél több) weboldalra alkalmazva elérhetem ezt a "best fit" funkciót nem prestrós Operából és nem Operából.

( cherockee v | 2017. 03. 26., v – 20:41 )

Ha csak az kell, hogy egy elem se lehessen szélesebb, mint a képernyő (viewport), akkor is már js fog kelleni szerintem, css-el is kiadhatsz egy ilyent:

* { max-width: 1200px; }

... de ezt kézzel kell beállitanod, nem responsive, nem zoom érzékeny, és felül fogja birálni kb. minden. Greasemonkey a barátod, gyorsbillentyűt is egyszerűen meg lehet adni js-ben.

Ha olyan esetekre is kell, ahol a margin-ek és padding-ek és a szélességek több lépcsőben összeadódtak, akkor már jóval nehezebb a dolog, nem jut eszembe automatizálós megoldás. Lehet van más eset is, de nem jut eszembe olyan ami sűrűn lehet.

( uzsolt v | 2017. 03. 27., h – 15:30 )

Egyáltalán nem vagyok CSS-mágus, de ez a @media-okosság nem használható? Akár a megadott példa picit átírva?

én se vagyok céesesész, de úgy tűnik a @media a weboldal gazdájának való eszköz arra hogy a megjelenítőtől függő stílust huzasson be a browserral.

ez én esetemben meg csak egy dologtól teszem függővé az alternatív design-t: attól hogy a user rá-e kattint a "best fit"-re vagy nem.

tehát nem website designer oldalról vizsgálom a kérdést hanem browser developer oldalról.

ha csinálok egy @media { } blokkot, akkor továbbra is kérdés hogy milyen css szabály kerül a blokkba.

~~~~~~~~
deb http://deb.uucp.hu/ wheezy yazzy repack

én még mindig a css szabályon vagyok elakadva, azt megadhatod, hogy ne legyen semmi 1000px feletti szélességű, de a 3 oszlopból jobb oldalt levő elem, amiben van egy al-elem és abban mégegy, ha szélességében fix, padding miatt kilóg, ezt nehezen találja meg egy parser, és még nehezebben dönti el mit kéne vele kezdeni. lehet offset-eket nézni, ha a left offset értéke + a szélesség nagyobb, mint 1000 pixel, akkor talán kijelenthető, hogy miatta lóg ki.

lehet az lenne a legokosabb ha megtalálnánk az opera kódjában, ők hogy oldották meg...
de a nem illegálisan közkézen forgó Presto motor forráskódjában a "Best fit"-re keresve csak a képek renderelésére találtam utalást.

~~~~~~~~
deb http://deb.uucp.hu/ wheezy yazzy repack

attól hogy a user rá-e kattint a "best fit"-re vagy nem

Ezt nem írtad. De ezt akár meg lehet úgy oldani, hogy vagy behúzod a user-css-t, vagy sem. Nem tudom, hogy ez a böngészőben megoldható-e egy gombnyomással, vagy pedig menü almenüjének a dialógus ablakán lévő negyedik fül ötödik pontját kell kiikszelni-e.

ha csinálok egy @media { } blokkot, akkor továbbra is kérdés hogy milyen css szabály kerül a blokkba

Ilyesmire gondoltam: 

@media screen and (max-width: 480px) {
    body {
        max-width:480px;
    }
}

Vagy valami ilyesmi.

Ezt nem írtad

akkor ezennel pontosítottam a kérdésem.

ezt akár meg lehet úgy oldani, hogy vagy behúzod a user-css

pont erről van szó, hogy igény esetén a böngésző betölt egy css-t / lefuttat egy meghatarozott js-t, és amit a böngésző ismer, nem az adott weboldal kódjához tartozik.
erre akartam utalni a userstyle/userscript szóval.

az hogy a böngészőben (melyikben?) hogyan kivitelezhető, az nem kérdés. client-side mindent uralok :)

ez a css kód szerintem csak annyit jelent, hogy ha legfeljebb 480px széles a képernyőm, akkor a body legfeljebb 480px széles legyen.
kipróbálom, mivan ha csak a body-ra akasztok width/max-width-t, de gyanítom, a child elementek szélessége így is széthúzhatja.

~~~~~~~~
deb http://deb.uucp.hu/ wheezy yazzy repack

akkor ezennel pontosítottam a kérdésem.

Ezennel értettem :)

kipróbálom, mivan ha csak a body-ra akasztok width/max-width-t, de gyanítom, a child elementek szélessége így is széthúzhatja

Mint ahogy írtam vala, "Egyáltalán nem vagyok CSS-mágus". Csak egy ötlet volt részemről, sose lehet tudni, hátha egy hozzáértőbbnek beugrik valami. Tovább nem vállalok felelősséget az ötletért, illetve a további finomítási igények a /dev/null-ban kötnek ki :)

( manfreed (nem ellenőrzött) | 2017. 03. 28., k – 07:49 )

Egy alternatív megoldás a problémádra: Miért nem használod a böngésző zoom funkcióját?

Tegyük fel, hogy a legtöbb weboldal 1366px szélességen használható. Mivel ez a legelterjedebb felbontás (saját stat szerint vélhetőleg erre optimalizálnak az oldalak készítői). 75%-ra nagyítással (vagyis kicsinyítéssel) az pont 1024px-ra jön ki, tehát ami 1366-on jól néz ki, az ekkora zoommal 1024-en fog jól kinézni.

Persze minden kisebb lesz. A betűk kapcsán nekem úgy rémlik, hogy amikor az 1024-es monitorok voltak elterjedtek jellemzően a 10-12px-es betűméret volt a weben a divat. A manapság divatos 14-16px-es betűk 75%-ra nagyítva pont akkorák lennének, tehát talán ez nem lenne problémás. A képek újraméretezése talán már zavaróbb lehet, erre azt mondom, hogy kompromisszum :)

köszönöm az ötleted.
természetesen a legkézenfekvőbb a zoom lenne ha megelégednék ennyivel :)

a kép átméretezés se lenne akadály (webkites böngésző az alany), mert a webkit tud olyat hogy a képeket nem méretezi át zoomoláskor (full-content-zoom off), csak a fontokat. bár igaz, akkor a layoutot se méretezi...

de a font méretet nem engedem változni, kiváltképp nem lefele.
illetve a "Best fit" nem csak 1024px mellett működjön (működik szépen Presto alatt).

ha csak a nagyítás lenne a bajom, akkor a zoom jó lenne.

~~~~~~~~
deb http://deb.uucp.hu/ wheezy yazzy repack