Lezing Pre‐CSS day

Lezing pre css day events

Begin lezing

Sanne liet een paar projecten zien van studenten en van zichzelf die gemaakt waren aan de hand van css. Deze projecten zagen er erg ingewikkeld uit. Tevens legde hij iets uit over de indeling van de minor die je zou kunnen volgen aan de opleiding.

Bramus van Damme

Allereerst liet hij een paar werken zien die gemaakt waren aan de hand van view transitions. Je kan dit in verschillende browsers gebruiken, maar er moeten nog wel dingen getweeked worden. “The View Transition API gives you the power to create seamless transitions between 2 different views of your website”.

Document.addEvenntListener(‘click’, e  {

There will be a cross overlap between old en new content.

Document.startViewTransition( ()  {                                   
     nextSentence ()
});

: root : : view-transition
      : : view-transition-group (root)
                   : : view-transition-image-pair (root)
                          : : view-transition-old (root)
                          : : view-transition-new (root)

2 Snapshots over elkaar. We kunnen de animatie naam veranderen en we kunnen de keyframes veranderen. Live transitions. Fade in, fade out. The group is the one responsible for changing everything. For example size.

1. Identify a name  bijv card, cover, control
2. Trigger view transition
3. Customize animations using css Nieuwe dingen ; het is nu beschikbaar in chrome. Een ding wat niet fijn is is dat je nu nog zelf voor alles namen moet geven per view-transition. Events on old page:

• Navigate
• Pagehide
• Visibilitychange
• Unload
• Pageswap

Events on the new page

• Load
• Pageshow
• Pagereveal

Miriam Suzanne

Normal flow is de default layout van het web. Intrinsic sizing Extrinsic sizing

Content pushing out and pushing in. You cant change the container your quering. For size related queries you have to turn off intrinsic sizing, which won’t always go well. Contain : style ; Height : inline size ; Containment is invasive. There are too many side effects. You can measure actual styles with container queries.