diff --git a/gulpfile.js b/gulpfile.js
index 7171d8092..76b706ec7 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -19,6 +19,7 @@
 "use strict";
 
 var autoprefixer = require("autoprefixer");
+var cssvariables = require("postcss-css-variables");
 var fancylog = require("fancy-log");
 var fs = require("fs");
 var gulp = require("gulp");
@@ -82,6 +83,9 @@ var AUTOPREFIXER_CONFIG = {
     "not dead",
   ],
 };
+var CSS_VARIABLES_CONFIG = {
+  preserve: true,
+};
 
 var DEFINES = {
   PRODUCTION: true,
@@ -765,7 +769,12 @@ gulp.task(
         gulp.dest(GENERIC_DIR + "web")
       ),
       preprocessCSS("web/viewer.css", "generic", defines, true)
-        .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)]))
+        .pipe(
+          postcss([
+            cssvariables(CSS_VARIABLES_CONFIG),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(GENERIC_DIR + "web")),
 
       gulp
@@ -795,7 +804,12 @@ gulp.task(
       createComponentsBundle(defines).pipe(gulp.dest(COMPONENTS_DIR)),
       gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(COMPONENTS_DIR + "images")),
       preprocessCSS("web/pdf_viewer.css", "components", defines, true)
-        .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)]))
+        .pipe(
+          postcss([
+            cssvariables(CSS_VARIABLES_CONFIG),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(COMPONENTS_DIR)),
     ]);
   })
@@ -851,7 +865,12 @@ gulp.task(
         gulp.dest(MINIFIED_DIR + "web")
       ),
       preprocessCSS("web/viewer.css", "minified", defines, true)
-        .pipe(postcss([autoprefixer(AUTOPREFIXER_CONFIG)]))
+        .pipe(
+          postcss([
+            cssvariables(CSS_VARIABLES_CONFIG),
+            autoprefixer(AUTOPREFIXER_CONFIG),
+          ])
+        )
         .pipe(gulp.dest(MINIFIED_DIR + "web")),
 
       gulp
diff --git a/package-lock.json b/package-lock.json
index 8a80230bc..7f94a171d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10957,6 +10957,31 @@
         }
       }
     },
+    "postcss-css-variables": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz",
+      "integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        }
+      }
+    },
     "postcss-load-config": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
diff --git a/package.json b/package.json
index 3f0b85a9c..c53d9737c 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "jstransformer-markdown-it": "^2.1.0",
     "merge-stream": "^1.0.1",
     "mkdirp": "^0.5.1",
+    "postcss-css-variables": "^0.14.0",
     "prettier": "^1.19.1",
     "rimraf": "^2.7.1",
     "streamqueue": "^1.1.2",
diff --git a/web/viewer.css b/web/viewer.css
index 3d9fa9fe3..435d55123 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -17,6 +17,8 @@
 
 :root {
   --sidebar-width: 200px;
+  --sidebar-transition-duration: 200ms;
+  --sidebar-transition-timing-function: ease;
 }
 
 * {
@@ -96,23 +98,19 @@ select {
   position: absolute;
   top: 32px;
   bottom: 0;
-  width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility
-                   with older browsers that lack support for CSS variables. */
   width: var(--sidebar-width);
   visibility: hidden;
   z-index: 100;
   border-top: 1px solid rgba(51, 51, 51, 1);
-  transition-duration: 200ms;
-  transition-timing-function: ease;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 html[dir='ltr'] #sidebarContainer {
   transition-property: left;
-  left: -200px;
   left: calc(-1 * var(--sidebar-width));
 }
 html[dir='rtl'] #sidebarContainer {
   transition-property: right;
-  right: -200px;
   right: calc(-1 * var(--sidebar-width));
 }
 
@@ -176,8 +174,8 @@ html[dir='rtl'] #sidebarContent {
   outline: none;
 }
 #viewerContainer:not(.pdfPresentationMode) {
-  transition-duration: 200ms;
-  transition-timing-function: ease;
+  transition-duration: var(--sidebar-transition-duration);
+  transition-timing-function: var(--sidebar-transition-timing-function);
 }
 html[dir='ltr'] #viewerContainer {
   box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
@@ -193,12 +191,10 @@ html[dir='rtl'] #viewerContainer {
 
 html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   transition-property: left;
-  left: 200px;
   left: var(--sidebar-width);
 }
 html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   transition-property: right;
-  right: 200px;
   right: var(--sidebar-width);
 }