Legacy code

Forum Moderators: not2easy

Message Too Old, No Replies

Legacy code

berty21e

5:09 pm on Mar 5, 2020 (gmt 0)

Hi all,

I've just started a new job and one of the things I've noticed when viewing the page source code is that all the code from the style.css is rendering (in full) at the top of each page before the page content starts.

I copied the code of the style.css into notepad++ and noticed that practically all of the code is on one line. I don't know too much about css, could this be causing the code issues within the source view?

I'd put the URL of the company I'm working for (not like the page source is confidential) but I don't know if that's allowed on the forum rules? :/

lammert

6:02 pm on Mar 5, 2020 (gmt 0)

Welcome to WebmasterWorld berty21e!

One line CSS shouldn't be a problem. CSS uses curly braces commas, colons and semicolons to separate items, not new-line characters.

not2easy

6:07 pm on Mar 5, 2020 (gmt 0)

Hi berty21e and welcome to WebmasterWorld [webmasterworld.com]

No, we don't use links to diagnose problems. We prefer to educate webmasters to make their own judgements, rather than discuss specifics of any site. ;) If you're interested in the forum rules, our Terms are listed in the footer on each page and the CSS forum's Charter: [webmasterworld.com...] lists how to use this particular part of the forums. Charters are on the dropdown menu of the "Forum Options" button just above your post.

If the text is rendering, it sounds as if it may be missing its <style tags OR it may be that the css is not in the right part of the page. Having all the code on one ine is not (usually) a problem, that is likely the result of optimizing or minimizing the code. I would look at the page source to see whether the css is actually enclosed in <style> tags first and also whether the mime type (such as type="text/css") is listed. That should be in the <head> and not the <body> of the page but with proper tags it can be in the body. The DOCTYPE (first line at the top - unless it is html5, then you'll see <!DOCTYPE html> ) also can make a difference. Today's browsers are very forgiving but if the css is badly labeled or badly placed it isn't their fault.

I have seen legacy code that still has some very old usage, where parts have been updated, leaving old artifacts. The notepad++ text editor is a good tool to use, it should have a way to check syntax that can list problems and possibly show the corrections. I haven't used it for several years so I can't help with that part, but it is still popular and others here can chime in.

Dimitri

6:11 pm on Mar 5, 2020 (gmt 0)

all the code from the style.css is rendering (in full) at the top of each page before the page content starts.

What do you mean by rendering ? Do you mean the styles are output like a raw text at the top of the page? If so , it "might" be a problem of MIME type. Verify that the server is serving the file with the MIME type "text/css". Also, check how the external file is included. It should be in the <head></head> with a line similar to <link rel="stylesheet" type="text/css" href="style.css">

If all is correct, then it's possible that, there is a formatting error in the style rules, which is breaking the interpretation by the browser. This can go from missing closing bracket, to forbidden character, problem with opened and closed quotes, etc...

To debug the file, you can use this : [jigsaw.w3.org...]

And your can also "de-minify" it, for example, the Chrome's dev tool has a function to do so.

I don't know if that's allowed on the forum rules? :/

You should know, since you had to accept them before joining.

lucy24

6:18 pm on Mar 5, 2020 (gmt 0)

Edit: Yes, all right, so I type slower than Dimitri...

By �rendering� do you mean that the actual text of the CSS is displayed in the visible page? Or do you mean that when you View Source (or whatever your browser calls it), the entire content of any and all external stylesheets is incorporated between the page's own <style> tags? Are you sure this isn't an issue with some specific browser? I could easily imagine a browser deciding to do this, under the illusion that they're being helpful.

It doesn�t matter if the code is all on one line; that�s just minifying. (The idea is to save two picoseconds in download time at the expense of making the CSS unreadable for humans.) Line breaks in CSS have no syntactic meaning; spaces sometimes do, sometimes don�t. But it's also possible that the CSS was written on a system that uses a line-break format that NotePad doesn't recognize. The Mac Classic CR (\r) only, as opposed to CRLF (\r\n, Windows) or LF (\n, Unix), comes to mind. Just how old is the site?

Dimitri

6:23 pm on Mar 5, 2020 (gmt 0)

Edit: Yes, all right, so I type slower than Dimitri...

And @not2easy types again faster, this is why he is an Admin, and we are just Padawans.

Dimitri

6:27 pm on Mar 5, 2020 (gmt 0)

ps: thinking about it, may be the OP means the style is embedded directly in the <head></head> and not an external file. If so, there is nothing wrong with it. It prevents the styles to be cached, the maintenance might be harder IF the pages are static, but at the same time it limits the number of round-trips.

berty21e

9:55 am on Mar 6, 2020 (gmt 0)

Hi all,

Thanks for responding. Sorry I don't know how to highlight quoted text from other people's posts.

"You should know, since you had to accept them before joining." - As I say, I've just started a new job, I have had to complete approximately 20,000 training, t&c documents etc; I'm struggling to remember what day it is! I do my best, but only human.

"I would look at the page source to see whether the css is actually enclosed in <style>" - Some of the code is within a Style tag, a lot of it sits outside of these tags but regardless code shows both in and outside of the tags I can find. type="text/css" and <!DOCTYPE html> is also present, and sat within the <head> tags not the body.

"Or do you mean that when you View Source (or whatever your browser calls it), the entire content of any and all external stylesheets is incorporated between the page's own <style> tags?" - Yes this, it's not actually visible on the page of the website.

"... issue with some specific browser?" - I only have Chrome currently, I've logged an IT ticket to make sure I'm allowed to download different browsers for testing purposes, but TBH 75% of our traffic over a year is Safari (mobile), Chrome (mobile) and Chrome (desktop). I appreciate the other browsers aren't to be ignored, but if this code is causing adverse problems (speed, SEO etc) then it being an issue on Chrome is something I need to rectify.

"Just how old is the site?" - I don't know much history of the site yet; and my manager has only been with the business 10 months so, being that i'm in my first week here, I've still got a lot of fact finding to do. I don't know how long the current templates have been in use ( I can do some research on Wayback, but I've not had chance to do this yet). The site is run on Wordpress (again, don't know if CMS has always been so), which I'm familiar with but the templates are set up differently from previous (guess different developers have different styles) so it's a case of me feeling my way round and getting used to it.

"may be the OP means the style is embedded directly in the <head></head> and not an external file" - I'm not sure, as I say, I've used WP before and not had this issue. I can see the the css is sat in the section of WP that's I'd expect to find to, but I don't know how I'd tell if this is in a separate file or not; I'm afraid my knowledge just ins't that advanced.

not2easy

2:32 pm on Mar 6, 2020 (gmt 0)

Sorry I don't know how to highlight quoted text from other people's posts.

At the Welcome link above (opens in a new tab) there are tips and tricks about using this site's features. The text box where you might post a response has the label: Quick Reply. To have formatting tools such as Bold or italics or

Quotes

You just need to click Preview rather than Submit to open a formatting window.

External style sheets in WP are normally stored in the folder of the theme. If you have ftp access to the site, you can look through the theme's folders and find the .css file(s). The link you see in the source should tell you the name of the file and where you can find it. A link in the <head> area of the page source generally has identifying elements though they may differ and be arranged differently, look for something like:

<link rel="stylesheet" href="https://example.com/wp-content/themes/ExampleTheme/style.css" type="text/css" media="screen">

in this case you can find the "style.css" file in the ExampleTheme folder of the themes folder inside the wp-content folder.

You can copy the WP files or folders to your local machine to have a local copy to work on so you aren't changing the site itself by accident. The /wp-includes/ may have several .css files as it contains plugins and their supporting files. Plugins' .css files don't generally need editing and may not even be listed in the source of a page.

You can paste copies of the source code you want help with here, the instructions are available in that Charter link above. You'll notice that we use "example.com" to replace actual domains for privacy and security in these public discussions. I hope this information is helpful.

Legacy code

berty21e

lammert

not2easy

Dimitri

lucy24

Dimitri

Dimitri

berty21e

not2easy

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week