ChenXiu Posted June 30, 2021 Share Posted June 30, 2021 Certain "CSS-heavy" page that loads weird: when they load, I can see movement, jostling and repositioning taking place until a "homeostasis" occurs. It feels as if there is some conflicting CSS that the browser "eventually figures out." My CSS has no errors. However I'm sure some things can be done better. Other than a.) Spending the next year and a half learning CSS from the ground up, or b.) hiring a CSS Master to review my pages, is there on online tool that can help? Or even something built into Firefox/Chrome Developer tools that can help? The internet searches I have done on this topic only point to "CSS minifiers" and "CSS error detectors" ... but I have no errors, and minification has no effect on what I've described. Thank you. Quote Link to comment Share on other sites More sharing options...
Strider64 Posted June 30, 2021 Share Posted June 30, 2021 (edited) I for one have found using Grids and Flex to reduce the CSS file size a lot as you really don't use that much CSS when using Grids/Flex, plus it's very easy change the layout of the website. It's well worth redoing the CSS using grids/flex and it's a tad bit better than doing it from the ground up, but not by much. Here's a small example of my css (Actually it's SCSS, but it's just a processor version of CSS) - Though looking at this example it looks like just plain CSS in this portion. /* Approximately the size of an iPad Pro 12.9in 1024px */ @supports (grid-area: auto) { @media screen and (min-width: 64em) { .site { display: grid; grid-template-columns: 1fr minmax(19.2em, 44.80em); grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer"; justify-content: center; } .masthead { background-image: url(../images/img-header-001-1024.jpg); } .registerStyle { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "email email" "first last" "screenName telephone" "password1 password2" "birthday submitForm"; justify-content: center; } .first { grid-area: first; margin: 0 0.625em; } .last { grid-area: last; margin: 0 0.625em; } .screenName { grid-area: screenName; margin: 0 0.625em; } .telephone { grid-area: telephone; margin: 0 0.625em; } .emailStyle { grid-area: email; margin: 0 0.625em; } .password1 { grid-area: password1; margin: 0.3125em 0.625em; } .password2 { grid-area: password2; margin: 0.3125em 0.625em; } .birthday { grid-area: birthday; text-transform: capitalize; margin: 0.3125em 0.625em; } .submitForm { grid-area: submitForm; button { float: right; } } } } Another thing that will bog down the CSS is having LARGE image files and having redundant CSS. I also would stylize for smartphones first and work yourself up from there when it comes to CSS responsive web design. Edited June 30, 2021 by Strider64 Quote Link to comment Share on other sites More sharing options...
maxxd Posted June 30, 2021 Share Posted June 30, 2021 What you're describing sounds like a FOUC (Flash Of Unstyled Content) and is usually caused by any or all of a few things: Slow-loading (typically remote) stylesheets Stylesheet links at the bottom of the page instead of in the head Javascript styling Does your site use jQuery or Google Fonts, for instance? I've had this issue pretty consistently with Google Fonts or Adobe Font Kit. Quote Link to comment Share on other sites More sharing options...
ChenXiu Posted July 6, 2021 Author Share Posted July 6, 2021 On 6/30/2021 at 3:12 PM, maxxd said: Does your site use jQuery or Google Fonts No, nothing is external. No internal javascript styling, the 20 css rules are all in the <head> and the javascript I use is in the bottom of the page (completely removing all scripting doesn't make things better). My CSS is error-free, my HTML is error free, and my page loads in about .05 (5/100ths) of a second. I don't see any "flash of unstyled content," rather, I see a very quick "repositioning" of things. For example a <textarea> starts to appear in the middle of the page, and then quickly scoots over as the <ul><li> appears next to it. Like wearing one brown sock and one black sock, nobody else would really notice (or really care).... but I do 😀 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.