This may be a subjective question (I hope it isn't)... I develop web designs and applications using Visual Studio and usually Bootstrap. When I drag/drop a CSS file into a HTML document, Visual Studio generates the following code
<link href="styles.css" rel="stylehseet" />
The Bootstrap template also uses this attribute ordering.
Personally I prefer to order my attribute to keep fixed width ones at the front because everything looks tidier; take for example my ordering vs Visual Studio & Bootstrap's ordering:
Mine
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="mystyles.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="foobar.js"></script>
Theirs
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="mystyles.css" rel="stylesheet" />
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="foobar.js" type="text/javascript"></script>
See how the attributes in my link and script tags line up? I think this looks far neater when maintaining documents, and also makes block editing possible.
So what I want to know is; is this just personal preference or is there a justifiable reason for putting rel and type after href and src?
From the HTML 4.01 specification:
Elements may have associated properties, called attributes, which may have values (by default, or set by authors or scripts). Attribute/value pairs appear before the final ">" of an element's start tag. Any number of (legal) attribute value pairs, separated by spaces, may appear in an element's start tag. They may appear in any order.
I can't find anything in the HTML 5 spec which spells out it so clearly, but that rule has not changed.
It is just personal preference.
For html parsers, the order of attributes does not matter. So it your prefrences.
But always they sort and show attributes in alphabetic order.
Even you arrange them in youre source code you would see the browser shows them in alphabetic arrange in developer view.
The HTML5 standard says the order doesn't matter as per the above answers. But if that's the case there will be no need to indent the code as well as a programming language like Java doesn't care about indentation.
The best thing is to follow the conventions already being used in the repository. If you are starting new, the coding standard below provides an order for elements that is being followed by a lot of people.
Attribute order
HTML attributes should come in this particular order for easier reading of code.
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.
Source: https://codeguide.co/#html-attribute-order
Related
To avoid blocking the rendering of the "above the fold content" of a site one options seems to be using a css file with a bogus media. Browsers will download it asynchronously anyway as the media "could" apply later...
<head>
<link rel="stylesheet" href="style.css" media="bogus">
</head>
Now, one way to get the CSS in place would be a link (with the proper media screen) at the very end of the body tag but i'd rather look at JS options.
Question: How do we change the media bogus using plain JS (no jQuery, no frameworks)
These are the steps you can follow:
Add an id to the <link /> tag.
<link rel="stylesheet" href="style.css" media="bogus" id="myLink" />
Use the following JavaScript (either one of the lines):
document.getElementById("myLink").setAttribute("media", "screen");
document.querySelector("#myLink").setAttribute("media", "screen");
document.querySelectorAll("link")[0].setAttribute("media", "screen");
My recommendation is to better add an id and then call using it.
I am confused as to why there is a difference in both of these CDN links when used to modify my simple website. What is the difference?
Method 1: These links allows my code to resize perfectly as the window goes from widest possible width to minimum width using chrome, IE11, and Firefox. The problem is 2-fold: 1) I lose the <span class="input-group-addon">$</span> as a neat looking symbol and instead get a plain ol' dollar sign. 2) I am a beginner, so I don't know if using these seemingly outdated links will make me have to backktrack in the future. See example here.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Method 2: These links have a hiccup when resizing. As you pass mid-width the AddMoney element jumps to the full width of the textarea above it. I want it to resize similar to the above. Fortunately, these links are directly from the current bootstrap page so I assume they are the most recent. Using the same link above simply paste over the js and css links using the below.
<link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script data-require="bootstrap" data-semver="2.3.2" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Because in your first example, you are including Bootstrap 2 and in the second you are including Bootstrap 3. These two versions of Bootstrap are vastly different in the way the HTML needs to be structured as well as what features they offer. I would suggest that you use the latest version of Bootstrap 3, so go take a look at the docs to figure out how the HTML should be formatted for that version and adjust your code accordingly.
I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
What are the script tags I HAVE TO insert into the <head> of my HTML???
Here is what I have:
<head>
<title>My Web Site</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='scrollup.js'></script>
<script type='text/javascript' src='verticalsmoothscrolling.js'></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
</head>
But if I delete first three script tags above and add this one instead:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...everything works the same way (plus it looks clean and neat).
Can anyone explain me in simple words what each of the first three script tags does, and how do they differ from the one I added instead of those three??? Which one would you use?
I prefer the bottom solution but I am not sure if that's correct/best option???
The core difference here between the libraries is that one is basic jQuery, while the other two are jQuery UI and its stylesheet. jQuery UI isn't often a library that's included in pages unless it's very deliberate. If you're not sure that you're using it, you're probably not using it.
The tag that you added is simply a newer version of jQuery. The reason everything works the same is that your code likely isn't using jQuery UI, so there's no issue if it goes missing.
Also, you don't HAVE to put your script tags in the head. They can go anywhere on the page. However, it's good practice to put your script tags at the BOTTOM of the page. This is so that your page is able to load and render the HTML elements without first having to load JavaScript, which can occasionally cause a bit of hangup on page load.
Update
As far as when to use jQuery UI, it's commonly used in projects with very dynamic UI elements. For instance, jQuery UI allows for click/draggable elements, dynamic sorting, resizable elements, etc. You can see a full listing of its features and demos here.
This library stands out because while standard jQuery does support these interactions, it's not quite as easy and clean as using jQuery UI. Note that jQuery UI is an extension of jQuery and relies on jQuery to run.
You replaced jquery 1.9.1 with jquery 2.0.0. If you want to know, what's different in the new version, you can always take a look at the patchnotes.
you dont HAVE to put any tags in the head of your page.
Although it is recommended you add META tags, the charset and the TITLE tag to name your page.
javascript can be placed anywhere on a page
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.