Modern CSS features: how to support older browsers?

Currently, if you try to open vpub-plus from Internet Explorer 11, it will be rendered incorrectly due to the use of modern CSS features. Original vpub actually supports IE 11 better than vpub-plus.

As a workaround you can paste CSS into PostCSS with Autoprefixer plugin to support older browsers: https://github.com/hugmouse/postcss-comp

Just copy and paste CSS into this tool, go to your instance settings (/admin/settings/edit) and replace the whole custom CSS section with it.

Current CSS of vpub-plus (1.11)

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Background Colors */
    --color-bg-page: mintcream;
    --color-bg-error: mistyrose;
    --color-bg-info: palegreen;
    --color-bg-table-row: whitesmoke;
    --color-bg-header-aside: paleturquoise;
    --color-bg-forum: cornsilk;
    --color-bg-post-article: white;
    --color-bg-code: whitesmoke;

    /* Text Colors */
    --color-text-body: black;
    --color-text-error: red;
    --color-text-info: green;
    --color-text-secondary: gray;

    /* Border Colors */
    --color-border: var(--color-text-secondary);

    /* Fonts */
    --font-size-base: 16px;
    --line-height-base: 1.4;

    /* Spacing */
    --spacing-small: 5px;
    --spacing-medium: 1em;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Background Colors */
        --color-bg-page: #121212; /* Dark background */
        --color-bg-error: #68313b;
        --color-bg-info: #223723;
        --color-bg-table-row: #1b1b1b; /* Dark table rows */
        --color-bg-header-aside: #2c2c2c; /* Dark header/aside */
        --color-bg-forum: #191919; /* Dark forum background */
        --color-bg-post-article: #1e1e1e; /* Dark post/article */
        --color-bg-code: #2d2d2d; /* Dark code blocks */

        /* Text Colors */
        --color-text-body: white;
        --color-text-error: #ff6b6b; /* Lighter red */
        --color-text-info: #66bb6a; /* Lighter green */
        --color-text-secondary: #b0b0b0; /* Lighter gray */

        --color-border: #333;
    }
}

/* Body */
body {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-small);
    font-family: system-ui, sans-serif;
    background-color: var(--color-bg-page);
    color: var(--color-text-body);
}

a {
    color: var(--color-text-body);
}

/* Lists ************************************************************/
.errors {
    background-color: var(--color-bg-error);
    color: var(--color-text-error);
}

.info {
    background-color: var(--color-bg-info);
    color: var(--color-text-info);
}

.topic img {
    max-width: 100%;
    height: auto;
}

.topic p a {
    overflow-wrap: anywhere;
}

main {
    margin-bottom: var(--spacing-medium);
}

ol.posts, ol.replies {
    padding: 0;
    list-style: none;
}

ol.replies > li:not(:last-child) {
    margin-bottom: 1em;
}

/* Posts ************************************************************/
.topic tbody tr:nth-child(even) {
    background-color: var(--color-bg-table-row);
}

.signature > * {
    margin-bottom: 0;
}

.signature {
    border-top: 1px solid var(--color-text-secondary);
    padding-top: 0.5em;
}

.action {
    margin: 1em 1em 1em 0;
}

nav.breadcrumb {
    padding: 1em;
    border: 1px solid var(--color-border);
    margin: 1em 0;
}

.breadcrumb ul {
    list-style: none;
    padding-left: 1em;
}

.breadcrumb > ul {
    padding: 0;
    margin: 0;
}

.col-author {
    text-align: center;
    width: 100px;
}

table.post {
    background-color: var(--color-bg-post-article);
}

table.post .header {
    background-color: var(--color-bg-header-aside);
}

article {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-post-article);
    margin-bottom: 1em;
}

article > header {
    background-color: var(--color-bg-header-aside);
    border-bottom: 1px solid var(--color-text-secondary);
    padding: 0.3125em 1em;
}

article > div {
    padding: 0 1em;
}

.forum {
    background-color: var(--color-bg-forum);
}

/* Start post */
/* With a table */
.post-aside {
    text-align: center;
    width: 150px;
    background-color: var(--color-bg-header-aside);
}

.post-body {
    height: 100%;
}

.post-body, .post-body td, .post-body tr {
    padding: 0;
    border: 0;
}

.post-body tbody {
    background-color: inherit;
}

table {
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    width: 100%;
}

tr, td, th {
    vertical-align: top;
    border: 1px solid var(--color-border);
    padding: 0.5em;
}

thead {
    background-color: var(--color-bg-header-aside);
}

tbody {
    background-color: var(--color-bg-post-article);
}

table td pre {
    overflow: auto;
    width: 0;
    min-width: 100%;
    background-color: var(--color-bg-code);
    border: 1px solid var(--color-border);
}

.content h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.content h2 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.content h3 {
    font-size: 1em;
    margin-bottom: 0.5em;
}

.content {
    margin: 1em 0;
}

/* Forms ************************************************************/
.auth-form {
    max-width: 200px;
}

.field {
    margin-bottom: 1em;
}

.field label {
    display: block;
    margin-bottom: 0.5em;
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea {
    width: 100%;
    padding: 0.5em;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--color-bg-post-article);
    color: var(--color-text-body);
}

textarea {
    height: 250px;
    resize: vertical;
}

/* Misc *************************************************************/
blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid var(--color-text-info);
    color: var(--color-text-info);
    font-style: italic;
}

blockquote::before {
    content: "> ";
}

.center {
    text-align: center;
}

.grow {
    width: 100%;
}

hr {
    border: none;
    height: 1px;
    background-color: var(--color-text-secondary);
}

.small {
    font-size: 0.875em;
    color: var(--color-text-secondary);
}

code {
    font-family: monospace;
    background-color: var(--color-bg-code);
    padding-left: 0.3em;
    padding-right: 0.3rem;
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

pre code {
    background-color: unset;
    border: none;
    padding-left: unset;
    padding-right: unset;
}

/* Insane hacks for the table styling on mobile devices */
@media (max-width: 600px) {
    body {
        padding: 0.5em;
    }
    header nav {
        text-align: center;
    }

    table.topic thead {
        display: none; /* Hide the table header for mobile */
    }

    table.topic tbody, table.topic tr, table.topic td {
        display: block;
        width: 100%;
    }

    table.topic td {
        border: none;
        padding: 0;
    }

    tbody tr td.col-author {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 0.5em;
        flex-direction: row-reverse;
    }
    td.col-author p {
        margin: 0;
    }
}

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--color-bg-header-aside);
    outline-offset: 2px;
}

svg.not-selectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.field input + p,
div.field textarea + p{
    margin-top: 0.5rem;
    opacity: 0.8;
    font-size: 0.80rem;
}

div.search-result {
    padding: 1em;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-post-article);
    margin: 1em 0;
}

div.search-result div.content {
    margin-bottom: 0;
}

div.search-result div.content * {
    font-size: 16px!important;
    display: inline;
    font-variant: normal;
}

form.search-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

Processed through PostCSS + Autoprefixer

*, *::before, *::after {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

:root {
    /* Background Colors */
    --color-bg-page: mintcream;
    --color-bg-error: mistyrose;
    --color-bg-info: palegreen;
    --color-bg-table-row: whitesmoke;
    --color-bg-header-aside: paleturquoise;
    --color-bg-forum: cornsilk;
    --color-bg-post-article: white;
    --color-bg-code: whitesmoke;

    /* Text Colors */
    --color-text-body: black;
    --color-text-error: red;
    --color-text-info: green;
    --color-text-secondary: gray;

    /* Border Colors */
    --color-border: var(--color-text-secondary);

    /* Fonts */
    --font-size-base: 16px;
    --line-height-base: 1.4;

    /* Spacing */
    --spacing-small: 5px;
    --spacing-medium: 1em;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Background Colors */
        --color-bg-page: #121212; /* Dark background */
        --color-bg-error: #68313b;
        --color-bg-info: #223723;
        --color-bg-table-row: #1b1b1b; /* Dark table rows */
        --color-bg-header-aside: #2c2c2c; /* Dark header/aside */
        --color-bg-forum: #191919; /* Dark forum background */
        --color-bg-post-article: #1e1e1e; /* Dark post/article */
        --color-bg-code: #2d2d2d; /* Dark code blocks */

        /* Text Colors */
        --color-text-body: white;
        --color-text-error: #ff6b6b; /* Lighter red */
        --color-text-info: #66bb6a; /* Lighter green */
        --color-text-secondary: #b0b0b0; /* Lighter gray */

        --color-border: #333;
    }
}

/* Body */
body {
    max-width: 800px;
    margin: 0 auto;
    padding: 5px;
    padding: var(--spacing-small);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    background-color: mintcream;
    background-color: var(--color-bg-page);
    color: black;
    color: var(--color-text-body);
}

a {
    color: black;
    color: var(--color-text-body);
}

/* Lists ************************************************************/
.errors {
    background-color: mistyrose;
    background-color: var(--color-bg-error);
    color: red;
    color: var(--color-text-error);
}

.info {
    background-color: palegreen;
    background-color: var(--color-bg-info);
    color: green;
    color: var(--color-text-info);
}

.topic img {
    max-width: 100%;
    height: auto;
}

.topic p a {
    word-wrap: anywhere;
}

main {
    margin-bottom: 1em;
    margin-bottom: var(--spacing-medium);
}

ol.posts, ol.replies {
    padding: 0;
    list-style: none;
}

ol.replies > li:not(:last-child) {
    margin-bottom: 1em;
}

/* Posts ************************************************************/
.topic tbody tr:nth-child(even) {
    background-color: whitesmoke;
    background-color: var(--color-bg-table-row);
}

.signature > * {
    margin-bottom: 0;
}

.signature {
    border-top: 1px solid gray;
    border-top: 1px solid var(--color-text-secondary);
    padding-top: 0.5em;
}

.action {
    margin: 1em 1em 1em 0;
}

nav.breadcrumb {
    padding: 1em;
    border: 1px solid gray;
    border: 1px solid var(--color-border);
    margin: 1em 0;
}

.breadcrumb ul {
    list-style: none;
    padding-left: 1em;
}

.breadcrumb > ul {
    padding: 0;
    margin: 0;
}

.col-author {
    text-align: center;
    width: 100px;
}

table.post {
    background-color: white;
    background-color: var(--color-bg-post-article);
}

table.post .header {
    background-color: paleturquoise;
    background-color: var(--color-bg-header-aside);
}

article {
    border: 1px solid gray;
    border: 1px solid var(--color-border);
    background-color: white;
    background-color: var(--color-bg-post-article);
    margin-bottom: 1em;
}

article > header {
    background-color: paleturquoise;
    background-color: var(--color-bg-header-aside);
    border-bottom: 1px solid gray;
    border-bottom: 1px solid var(--color-text-secondary);
    padding: 0.3125em 1em;
}

article > div {
    padding: 0 1em;
}

.forum {
    background-color: cornsilk;
    background-color: var(--color-bg-forum);
}

/* Start post */
/* With a table */
.post-aside {
    text-align: center;
    width: 150px;
    background-color: paleturquoise;
    background-color: var(--color-bg-header-aside);
}

.post-body {
    height: 100%;
}

.post-body, .post-body td, .post-body tr {
    padding: 0;
    border: 0;
}

.post-body tbody {
    background-color: inherit;
}

table {
    border-collapse: collapse;
    border: 1px solid gray;
    border: 1px solid var(--color-border);
    width: 100%;
}

tr, td, th {
    vertical-align: top;
    border: 1px solid gray;
    border: 1px solid var(--color-border);
    padding: 0.5em;
}

thead {
    background-color: paleturquoise;
    background-color: var(--color-bg-header-aside);
}

tbody {
    background-color: white;
    background-color: var(--color-bg-post-article);
}

table td pre {
    overflow: auto;
    width: 0;
    min-width: 100%;
    background-color: whitesmoke;
    background-color: var(--color-bg-code);
    border: 1px solid gray;
    border: 1px solid var(--color-border);
}

.content h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.content h2 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.content h3 {
    font-size: 1em;
    margin-bottom: 0.5em;
}

.content {
    margin: 1em 0;
}

/* Forms ************************************************************/
.auth-form {
    max-width: 200px;
}

.field {
    margin-bottom: 1em;
}

.field label {
    display: block;
    margin-bottom: 0.5em;
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea {
    width: 100%;
    padding: 0.5em;
    border: 1px solid gray;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    background-color: white;
    background-color: var(--color-bg-post-article);
    color: black;
    color: var(--color-text-body);
}

textarea {
    height: 250px;
    resize: vertical;
}

/* Misc *************************************************************/
blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid green;
    border-left: 4px solid var(--color-text-info);
    color: green;
    color: var(--color-text-info);
    font-style: italic;
}

blockquote::before {
    content: "> ";
}

.center {
    text-align: center;
}

.grow {
    width: 100%;
}

hr {
    border: none;
    height: 1px;
    background-color: gray;
    background-color: var(--color-text-secondary);
}

.small {
    font-size: 0.875em;
    color: gray;
    color: var(--color-text-secondary);
}

code {
    font-family: monospace;
    background-color: whitesmoke;
    background-color: var(--color-bg-code);
    padding-left: 0.3em;
    padding-right: 0.3rem;
    border-radius: 3px;
    border: 1px solid gray;
    border: 1px solid var(--color-border);
}

pre code {
    background-color: transparent;
    background-color: initial;
    border: none;
    padding-left: 0;
    padding-left: initial;
    padding-right: 0;
    padding-right: initial;
}

/* Insane hacks for the table styling on mobile devices */
@media (max-width: 600px) {
    body {
        padding: 0.5em;
    }
    header nav {
        text-align: center;
    }

    table.topic thead {
        display: none; /* Hide the table header for mobile */
    }

    table.topic tbody, table.topic tr, table.topic td {
        display: block;
        width: 100%;
    }

    table.topic td {
        border: none;
        padding: 0;
    }

    tbody tr td.col-author {
        display: -moz-box;
        display: flex;
        -moz-box-pack: start;
             justify-content: start;
        -moz-box-align: center;
             align-items: center;
        gap: 0.5em;
        -moz-box-orient: horizontal;
        -moz-box-direction: reverse;
             flex-direction: row-reverse;
    }
    td.col-author p {
        margin: 0;
    }
}

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid paleturquoise;
    outline: 2px solid var(--color-bg-header-aside);
    outline-offset: 2px;
}

svg.not-selectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.field input + p,
div.field textarea + p{
    margin-top: 0.5rem;
    opacity: 0.8;
    font-size: 0.80rem;
}

div.search-result {
    padding: 1em;
    border: 1px solid gray;
    border: 1px solid var(--color-border);
    background-color: white;
    background-color: var(--color-bg-post-article);
    margin: 1em 0;
}

div.search-result div.content {
    margin-bottom: 0;
}

div.search-result div.content * {
    font-size: 16px!important;
    display: inline;
    -webkit-font-feature-settings: normal;
       -moz-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
}

form.search-form {
    display: -moz-box;
    display: flex;
    gap: 0.5rem;
    -moz-box-align: center;
         align-items: center;
    -moz-box-pack: center;
         justify-content: center;
}