CSS Knowledge

This document contains practical knowledge and usage of CSS in frontend enginering.

A Scrollable Sidebar

Create a fixed left sidebar with scrollable content:

.sidebar {
    position: fixed;
    width: 200px;
    overflow-y: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

Hide Scrollbar

If you want to make the component scrollable, but want to hide the scrollbar:

.hiddenScrollbar {
    /* For Internet Explorer and Microsoft Edge */
    -ms-overflow-style: none;
    /* For Firefox */
    scrollbar-width: none;
}

.hiddenScrollbar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

Global CSS

In Svelte, css styles defined within .svelte files are scoped, that means Svelte will generate unique class names to make sure the styles between two different components won’t conflict with each other. Still, you can define a global styles:

:global(.hiddenScrollbar) {
    /* For Internet Explorer and Microsoft Edge */
    -ms-overflow-style: none;
    /* For Firefox */
    scrollbar-width: none;
}

CSS Selectors

Selectors define the pattern to select elements. There are many selector types and the usage is pretty flexible, I recommend to use https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors as a reference to write the selectors you need.

For example, in order to search all h2 tags without class name toc-exclude in whole document:

const headingSelector: string = ":is(h2):not(.toc-exclude)";

let headings = [...document.querySelectorAll(headingSelector)] as HTMLHeadingElement[];

CSS Animations

CSS animations consist two components:

1. a style describing the CSS animation
2. a set of keyframes indicate the start, intermediate and end states of animation styles

For example, in order to show a popup effect when rendering a component:

.recordcards {
    animation: pop 0.25s ease-out;
}

@keyframes pop {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

• 0.25s is the animation-duration, specify the lenght of time an animation complete in one cycle.
• ease-out is an easing-function, specify the rate at which a numerical value changes. ease-out means to start abruptly and then progressively slow down till the end.
• transform: scale(0.9) defines a transformation in 2D or 3D space, scale(0.9) means a 2D scaling to 0.9 original size.

Calc

A css function that can do some calculation for some property values. For example, set the element with class content width to a result from the calc():

.content {
    width: calc(100%-320px);
}