2. Week 2
Op maandag ben ik gestart met HTML- en CSS-element te checken in "can I use" om te kijken welke elementen worden gesupport door welke browser. Bij elke element dat ik heb gecheckt heb ik een mogelijke oplossing of een ander element gezocht die beter gesupport wordt door browsers.
Onerror wordt gebruikt als fallback de img niet kan worden gelaadt, als dit element niet wordt ondersteund door de browser dan kan er if + else statement.
Masonry wordt gebruikt voor grids, het wordt door geen enkele browser gesupport, het heeft een automatische fallback van een grid maar dan krijg je niet het masonry resultaat. Om het resultaat van Masonry te krijgen kan het ook via een column property.
Text decoration wordt gedeeld gesupport door browsers wat opmerkelijk is, om het gewenste eindresultaat te krijgen werkt het over het algemeen wel, als het niet werkt kan je opdelen in verschillende regels styling.
Scrollbar wordt ook gedeeld gesupport door browsers, vaak krijg je de scrollbar die de browser meegeeft en kan je het zelf via css later aanpassen.
In mijn root heb ik mijn gradients in oklch gezet, omdat het niet door elke browser wordt gesupport heb ik @supports gebruikt, hierdoor als het niet wordt gesupport gaat die naar de fallback die in de root staat zodat er wel nog een gradient staat en niet een wit scherm.
@supports ( background: linear-gradient(in oklch, red 0 0) ) {
:root {
--gr-method: linear-gradient(0deg in oklch, rgba(27, 18, 69, 1) 0%, rgba(62, 17, 125, 1) 100%);
--gr-statistics: linear-gradient(0deg in oklch, rgba(27,112,112,1) 0%, rgba(33,155,155,1) 100%);
--gr-testing: linear-gradient(0deg in oklch, rgba(27,61,112,1) 0%, rgba(33,89,155,1) 100%);
--gr-profile: linear-gradient(0deg in oklch, rgba(180,87,81,1) 0%, rgba(240,119,93,1) 100%);
}
}
Op deze dagen was ik grotendeels van de tijd bezig met de deeltaak progressive enhancement
Op donderdag heb ik kleuren getest voor het nieuwe aangepaste design/huisstijl. De 1e vier zijn geteste tekstelementen kleurcontrast, als resultaat zijn ze geslaagd voor de toegankelijkheidsregels. De laatste 2 testresultaat zijn niet tekstuele elementen, de 1e is een svg wat als button wordt gebruikt, op dat gebied is het kleurcontrast geslaagd, dit kleurcontrast kan niet worden gebruikt als tekstelement want daarvoor is die niet geslaagd. Het 2e is een achtergrond van een link, de tekst zelf is voor alle contrastvoorwaarden geslaagd en de achtergrond is ook geslaagd want dat is een niet tekstueel element.
Op vrijdag heb ik het ontwerp aangepast. Ik heb de achtergrond een dynamischere gradient gegeven en ik heb het kleuren pallet rustiger gemaakt. Verder heb ik ook de "All stories" section aangepast, op dit moment worden de stories zichtbaar door te hoveren ik wil het ook nog via klikken zichtbaar maken.
.story-container {
display: flex;
flex-wrap: nowrap;
height: 22.5em;
width: 100%;
gap: .5em;
scroll-snap-type: x mandatory;
overflow: scroll;
justify-content: center;
margin: 2em 0 0 0;
> .indicator {
border-radius: var(--radius-2);
width: 20px;
height: 400px;
scroll-snap-align: start;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
overflow: hidden;
}
.gallery {
display: flex;
justify-content: space-between;
width: 100%;
overflow-x: scroll;
}
.gallery-item {
display: -webkit-inline-box;
justify-content: center;
align-items: start;
height: 320px;
margin: 0 5px;
overflow: hidden;
background-color: var(--white);
border-radius: 2px;
position: relative;
}
.story-img {
width: 200px;
height: 130px;
object-fit: contain;
transform: scale(2);
}
.indicator:hover {
width: 200px;
.gallery-content {
display: flex;
flex: wrap;
flex-direction: row;
background-color: var(--white);
width: 200px;
height: 140px;
position: absolute;
bottom: 0em;
z-index: 10;