I have a website that runs smoothly, but I just saw that when I'm viewing the source, in Chrome and IE9, it shows my css and javascript inline instead of the link to the files. <style type="text/css" style="display:none">[my css]</style> instead of the <link rel="stylesheet" type="text/css" href="style.css" /> that I see in my PHP editor and that I coded on purpose. I don't see things like this on other websites, only at mine.
How is this possible? A certain change in server settings?
The browser tools are just in-lining it to make your debugging easier. This is merely a convenience to show you the flow of the page. The files are still external and shared across many pages.
There are 3 different ways of adding CSS to your HTML pages: inline, external, and attribute-based.
Inline CSS is what you have now. It's when the CSS code is directly embedded into your HTML.
External CSS is when you reference a CSS file, like your second example.
Attribute based CSS is when you directly set attributes in the HTML file. Ex:
<div style="CSS HERE"></div>
All 3 methods work the same, but for abstraction purposes, external stylesheets are recommended.
In your case, the PHP editor is probably injecting the CSS directly into your code.
Related
I was given a code snippet from a company we are working with for integration but the script they have given me is injecting their stylesheet. Is there any way to manipulate or better integrate their code into the site?
This is what they gave me:
<div id="aiVwbfPVDo2FdPTRGRWzhF9I8RbaTruD_get_appointment_container">
<script type="text/javascript" src="https://providers.doctor.com/siteEnhance/getAppointmentWidget?key=aiVwbfPVDo2FdPTRGRWzhF9I8RbaTruD"></script></div>
When I inspect the code with a web browser it shows a stylesheet and button are inserted...how can I manipulate that code?
If the CSS isn't in your side, you can't manipulate it, the most you can do is override the styles, take in account the CSS specificity
why can't a css file be included in a .js?
in other words, why can't <style></style> syntax be included in a .js file? the js script and css works on my page when where are in the header but when I call them externally, the css fails?
People who implemented <script> and <style> 15 or 20 years ago decided not to do that.
Things moved very, very fast in the 90s, in some ways at least.
Note that JavaScript pre-dated CSS by a couple of years. They were developed and driven by different companies. By the time CSS was invented, modifying browser JavaScript parsers to understand CSS blocks was a very unlikely thing to happen (and, in fact, it didn't).
Here's a guess: you moved one or more <script>...</script> blocks along with one or more <style> ... <style> blocks into a single file, and then tried to import it with a <script src="something"></script> tag. That won't work. Your external JavaScript and CSS files need to be pure JavaScript and pure CSS.
Because you cannot style javascript, styles apply for html tags. If you include a style tag in a javascript file, what would the styles apply for?
I don't know of any way of including pure css in to a .js file, But there's an alternative.
You could use #getElementById().style.
Its not really practical but it's the only way that I know of.
There are several reasons:
Cascading StyleSheets are describing how things look on your web page whereas JavaScript describes how things behave – they are used for completely different things.
Websites should work without having JavaScript enabled. At least that's what I learned in the early days. If you included straight CSS in your JavaScript and the browser had JavaScript disabled then you wouldn't see those styles applied.
A .js file only contains Javascript. It's not an HTML file, so it isn't parsed for any kinds of <tagname> codes. You can't put <style> in it for the same reason that you don't surround the code with <script>...</script> inside the file (if you do this you'll get an error, because it's not Javascript). The contents of the file are treated like the contents inside a <script>...</script> block, and you're not allowed to put <style> in there, either -- it's only script code.
When I load a web page and do a view source, then I can see
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"/>
If I type in www.example.com/css/bootstrap/bootstrap.min.css in the address bar of the browser, then I can see the whole css file.
Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?
Any help is appreciated.
Thanks
Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?
No. Most browsers implement "view source" by re-requesting the page from your server (which may or may not come from cache) and then showing that text, exactly; you don't have an opportunity to run client-side code to remove link or style elements (and it would have to be client-side code, because naturally you can't do this server-side and still have the page render correctly for normal requests).
Even if you could run client-side code before the "view source" was shown, you can't do this with CSS anyway: Altering or removing the link element will remove the stylesheet associated with it. Even if you could (guessing at your reason for this), it wouldn't prevent anyone from being able to see your CSS with the most trivial amount of effort.
You could do something similar with JavaScript on your page (you can remove the script tag entirely once it's been run, it won't affect the code it loaded), but not with CSS, and that just prevents people from seeing the script elements in the debugging tools, not "view source."
Any pointers on removing the JavaScript tags...
Sure, as you're using jQuery, it's as simple as putting:
$("script").remove();
...in code that runs after all the other script code has run. Here's an example:
$(".dp").datepicker();
$("script").remove();
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>
Pick a date: <input type="text" class="dp">
</label>
Note that the jQuery UI datepicker keeps working, even though we removed the jQuery and jQuery UI script elements from the DOM. But again, they'd still be there in a "view source," because the above is client-side code.
I have an amateur sports website to maintain and I am not an expert in web development. The pages I can put on the website can only be in the form of predefined templates, something similar to wordpress.
The main website loads it's own CSS files and JS files which we do not want as it interferes with our customisations. These files change as and when the main administrators/developers deploy new ones to the main/parent website.
I want to dynamically block loading of all CSS files and JS files that are not ours and instead use our own custom CSS and JS files.
Currently I am doing something like this below, but as you can see I will have to update the file names whenever they change to something else and I would not know when they change unless I notice the difference on the webpages.
<script type="text/javascript">
$('link[rel=stylesheet][href="/assets/application-b51e2731e0d53e4d422.css"]').remove();
$('link[rel=stylesheet][href="/assets/print-a622ffc90d1232b126e42c.css"]').remove();
jQuery('head script[src*="application-7fd426f9bca208.js"]').remove();
</script>
Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?
Instead of worrying about tracking file names, why not just target anything that's not yours?
$('link').not('.myLink').remove();
And just make sure you drop that class on your link:
<link rel="stylesheet" href="path.css" class="myLink" />
I, like most devs, like to know when js is and isn't being used and style websites a little differently accordingly.
I then use this, almost immediately under the title to try and scrape the class off of the tag before the page is styled, rather than in a jQuery ready function to prevent the page from jumping.
<script>var a=document.getElementsByTagName("html")[0];a.className&&(a.className=a.className.replace(/no-js\s?/, ''));</script>
Is this, or is this not good practice and if not, where should it go. Sources to back up your answer please!
Consider page ready speeds, user experience and SEO.
There is no reason to use a no-js class when you can install a no-js stylesheet.
<link href="/css/styles.css" type="text/css" rel="stylesheet" />
<noscript>
<link href="/css/nojs.css" type="text/css" rel="stylesheet" />
</noscript>
Doing it with javascript just seems out of place. you'll have an arbitrary line in your javascript that removes a class from an element for no reason important to said javascript. Not to mention the cost of rendering the no-js version then rending the js version due to removing the class after rendering has began.
Using a no-js stylesheet should improve (even if just slightly) the performance of the js version of your site, and gives you the freedom to move and change your script without having to worry about it affecting your no-js class removal because your js no longer has anything to do with it.
If you absolutely insist on doing this with javascript, i'd suggest doing it with inline javascript immediately after said element.
<body class="no-js">
<script>
//document.body.className = "";
document.body.classList.remove("no-js");
</script>
In the <head> is the best place to prevent the "flash of unstyled content". Even the popular Modernizr library suggests this:
The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.