CSS kérdésem van

[Giraffe1]

padding, margin nem játszhat valahol? Mert egy örökölt tulajdonság is tud ilyen kalamajkát csinálni...

[kléni]

Nem pont a margin volt a baj, de sikerült megoldani. A canvas-t befoglaló div előtt lévő div-ben sok float volt. Ezt kicsit kiszépítettem, így már jó a magasság.

[payskin]

Ez állat: The "Blur Up" Technique for Loading Background Images

[kléni]

Ez a diasor annyira gyönyörűen leírja, mekkora káosz a van a CSS körül, hogy bátorkodom megosztani.

https://www.mediafire.com/file/irqg0emebtuooo2/02%20-%20CSS.pdf

[payskin]

Jó, ez csak 3 éves. Ja mégsem, mert 2016-os év végi indexoldal van benne. ?!??!? De akkor meg nem értem a vendorprefix részt, az már egy éve is régen a múlté volt, főleg flexboxnál.

 

A 23. oldali CSS-állapot viszont tényleg 3 éves (fura, hogy ezt használta), ma így néz ki. Mondjuk, vannak fura dolgok pirosban (Transitions, Transform, Web Animation), amik évek óta támogatottak a különböző böngészőkben annak ellenére, hogy nem lettek még W3C Recommenation, szóval ez nem feltétele a támogatásnak. Vagy ott a flexbox, ami ezek szerint még kandidál (flexible layout néven), de már teljes körűnek mondható a támogatottsága, a Bootstrap 4, azt hiszem flexbox alapon van újraírva (vagy már grid?).

 

Egy kicsit túl van drámázva az egész. A flex és a position nemcsak inline elemeket, hanem bármilyen elemet kivesz a flowból. A margók függőleges (és nem vízszintes, ahogy a dián van) átfedése akkor probléma, amikor először belefutsz és nem érted, mi történik. Onnantól nem nagyon okoz gondot, hacsak nem össze-vissza pakolod a margókat a dolgokra.

 

A border-boxot az IE 2009 (!), a Chrome (vendor prefix nélkül) 2011, a Firefox 2014 (wazz) óta támogatja. Ez 2017-ben említésre sem méltó. CSS tananyag, második óra, content-box, border-box, különbségek és milyen problémák jöhetnek elő, végül megállapodunk abban, hogy

 

* { box-sizing: border-box; }

 

és kész. Ennyi.

 

Na, egyelőre a 90. oldalig néztem, majd még folytatom. Egy biztos: rendkívül alapos!