TLDR; For those amongst us that generally only use CSS for minor tweaks, there is most likely nothing to worry about.
Since the announcement from David a couple of days ago, there has been quite a stir and a lot of discussion about what is and isn’t supported, and what will and will not break.
Fortunately, I’ve been lucky enough (along with a few others) to be able to preview and test the changes on some of my apps. This topic is a summary of what I’ve found.
But first, the important stuff…
To the best of my knowledge, this remains the official position from Glide on this topic, and that is not changing. The way I interpret that, and the way I’ve always interpreted it is as follows:
“Go ahead and do it if you want, but we won’t guarantee that it will work, or continue to work. And if it breaks, we won’t help you fix it.”
And I’ve always thought that is fair enough - do it at your own risk.
Okay, so with that said, here is what I’ve found. I’ve spent several hours today testing with a couple of apps that use quite a bit of custom CSS. Most of the CSS that I use falls into two broad categories:
- Category 1: Addressing specific Glide components to modify their appearance, visibility, or position on the screen
- Category 2: Using my own custom classes or inline styling to format rich text and HTML tables
And I have to say that the news is good. Throughout my testing, I did not find a single instance where my CSS does not work with the new DOM.
There is a third category which I have not tested, because it’s not something that I do. And that is using CSS to modify the structure of the app. And it seems that this is where it would be most likely to break. Here is a direct quote from @Mark:
“If your CSS makes changes to the structure of the app it’ll likely break. But if you just modify components you could be fine.”
And that is pretty much what I’ve found. Of course, it won’t be the same for everybody, because not everybody uses CSS in the same way. I’m sure there are some advanced users out there (way more advanced than me) that are going to find breakage after the change. However, even if there is - in most cases it should be fixable. But for most of us, the phrase “storm in a teacup” comes to mind 
Below is a summary of some of the things that I’ve tested and found to be working with the new DOM structure:
- CSS styled HTML Tables - yes, @MattLB your pretty tables should survive the transition
- Inline CSS styling in Rich Text components, eg.
<div style="color: #f15a29;">blah blah</div>- works perfectly fine. - Hiding the Back Button
<pre><span><style>
[data-test="back-button"] {
display: none;
}
- Repositioning Floating Buttons
<pre><span><style>
.fab-target >:nth-child(1) {
position: fixed;
top: 10% !important;
right: 5% !important;
}
- Restyling the Date Picker
<pre><span><style>
/* Month */
.MuiPickersSlideTransition-transitionContainer > * {
font-size: 1.5em !important;
}
/* Year & Day */
.MuiPickersToolbarText-toolbarTxt {
font-size: 2.125rem;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.235;
letter-spacing: 0.00735em;
}
/* Day only */
.MuiTypography-h4 {
font-size: 1.8rem !important;
}
- Adjusting the Basic Table Row height
<pre><span><style>
.sts-row {
height: 35px !important;
}
- Forcing Card Titles to wrap
<pre><span><style>
.card-title {
white-space: pre-wrap !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
- Adjusting Left Padding (indenting) Switch components
<pre><span><style>
[data-test="app-switch-view"] {
padding: 5px 40px;
}
- Changing the background colour of Choice options in chips layout
<pre><span><style>
[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: #D2202F;
}
- Hiding a Tab Title
<pre><span><style>
[data-test="nav-bar"] >div +* {
color: transparent !important;
}
- Suppressing the Image overlay on Inline List Tiles
<pre><span><style>
[data-test="tile-item"] .tile-overlay {
background: none;
}
- Tab Notification Labels
<pre><span><style>
button[aria-label="Announcements"]::before {
content: "{count}";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
padding: 3px;
top: 4px;
right: 50px;
z-index: 1;
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
}
- CSS Modal Overlay
<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%;
padding:100%;
background-color: rgb(150 150 150 / 20%);
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>
<!-- Box -->
<div style =" position: fixed;
top: 250px;
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%);
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>
<!-- Text-->
<br>
<h3><font color=#ffffff>{tp-nag-intro}</h3>
<pre><span><style>
[data-test="app-button-view"] {
position: fixed;
top: 370px;
margin-left:2%;
width:40%;
max-width:180px;
}
.fab-target >* {
display:none;
}
- Replacing the tab title with an image
<pre><span><style>
#app-root div[opacity='1'] {
color: transparent;
}
.nav-bar-root {
content: "";
display: block;
background-image: url(URL);
background-size: 200px 40px;
background-repeat: no-repeat;
background-position: center, center;
}
Obviously the above isn’t a comprehensive collection of every single thing that can be done with CSS in a Glide App, but it’s a pretty decent sample.
And I found all of the above to work perfectly with the new Glide DOM.
