How do you manage CSS for each platform?

Card Design
1

I usually start by writing a base code snippet (including common elements that both Windows and Mobile will have). Then, I separate specific elements such as width, height, font-size, and display style (often horizontal for desktop and vertical for mobile). This is the only method I can think of to make the CSS snippet as concise as possible.
Can you guys tell me how to make my css more concise and easier to maintenance?
This is how I format a simple container:

.container {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  background-color: var(--container-bg);
  backdrop-filter: blur(10px);
  font-family: text;
}

/* Mobile */ 
.mobile .container {
  margin: 0 auto;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.9rem;
}

/*Windows*/
.win .container {
  margin: 0 auto;
  padding: 15px;
  border-radius: 15px;
  font-size: 1.2rem;
}
2

That’s actually the ‘standard’ way to do it.

2 Likes
3

That part can be moved into the top section if it’s the same on all platforms.

1 Like
4

Thank you. I would like to ask if Anki will support better coding assistance in the future, like syntax highlighting? I mean, we already have that feature for editing HTML in the fields, right? It would be more convenient if we could use that when writing code as well.

5

Such a feature may come in the future, when the card layout screen gets ported to Svelte.

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.