About Kilian Valkhof

Using the best tool for the job

Whenever you start to create something you should think about using the language that is just good enough for you purpose. You shouldn't use Javascript for something that can be done using css. The reason for it is that js is a much heavier language. A lot more things can go wrong and because of this you should try to use the lightest items possible.

"Once you learn something, You wont learn it again"

Tools

Kilian gave us a lot of things that were new to us. From css things to html things. Here they are.

Appearance:none

Appearance:none can be used to stop the browser from giving styling to an element. For example a button. In each browser the button is styled just a bit differently.

:focus-visible

The focus-visible pseudo-element can be used to style an element whenever it is being visibly focussed on. This can be helpful for some people using the keyboard for navigation. For example

button:focus-visible {
outline: 2px solid blue;
}

Outline-color

Whenever you are using outlines and you want to have them set to none you should always set them to transparent instead.

button:focus-visible {
  outline-color: transparent; //Yes
  outline-color: none; //No
}

Inputs

<Input type="checkbox" switch />

This new input parameter is something that isn't implemented yet. but i could be coming soon. With this you can create a switch without using js or css for it.

<Input list="browsers">

This new input type is a list. With this you can create an input where the datalist is used to create an auto complete feature.

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<details><summary>

The details summary elements have been here for a while but i hadn't heard of them. With these elements you can create a collapsable textbox.

<details>
  <summary>Open Me!</summary>
  this is some text that you could only see when you click on Open Me!
</details

You can also edit most of the details with css. For example you can edit the flag that gets put before the details.

summary::marker {
  color: blue;
}

[open]summary::marker {
  color:red;
}

you can even edit multiple details to give them thesame name attribute. This way only 1 can be opened at any time.

Dialog

The dialog element is used as a modal. This element shows up at the top of you page. So even an element with z-index:999 will not be on top of it.

Container Queries

Containerqueries are a recent addition to css. to explain it simply: With Container Queries you can style the items within a container based on the height or width of the container.

.container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .item {
    background-color: lightgreen;
  }
}

:has

Has is by far the one i was most exited about. When i heard this was going to be a thing you could do in css i immediately started using it. You can use :has to get interaction in css. You can change an element based on the checked value of another. For example:

.card {
  border: 1px solid black; padding: 10px; margin: 10px;
}

.card:has(img) {
  background-color: lightyellow;
}

I used has in a few project from school already by the time i write this. and i even used it in some personal projects.

Masonry layout

Masonry layout is another one im really hyped about. Masonry layout is a grid layout where the items just try to fit wherever they can fit properly. It looks like some mosaik glass stained window in my opinion. here is how you would make them.

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

Sadly it is currently only supported in firefox under an experimental flag. So it cannot be used in many projects.

Scroll driven animations

Scroll driven animations is another item i really look forward to using. They are a type of web animation that reacts to the user's scrolling. This was already available using js but now it is possible to do it with css animations.

Reflection

Looking back onto this lecture i think this one was the best lecture out of all of them. Kilian really knew how to keep the audience on their toes and interest them. The lecture even went on for way to long because of how nice it was. The course should have more weekly nerds like kilian.

For my selfimprovement

At the point of writing this i have used almost all of the things kilian taught us. From :has to <details> to even container Queries. I really like these things. The thing i will be using te most is probably the :has selector. This has almost infinite uses.