What Does Mean /*! Some Url or Text */ in CSS

What does mean /*! some url or text */ in css

The exclamation mark is to keep an comment important . This comment will not be deleted while compressing. This is important e.g. for keep a licence in a CSS file after compressing. Uglify or YUICompressor will keep that comment after compressing.

/*! important comment will not be deleted while compressing */ 

The purpose of starting an initial comment with /*! in javascript and css files

It tells compression tools such as the YUICompressor and Uglify, which minify the code, to leave the commented section in place as they usually remove all comments from the code.

What does !-- -- In html mean

These are comments, that are not visible to the user but only when you view the actual HTML.

They are also useful in commenting out a block of code when you're doing testing, that way you can prevent from having to cut and paste the code else where, and then copy them back.

Additionally, some developers used them to 'hide' code, usually in scripts, to avoid a chunk of code displayed for browsers that disable Javascript.

<script>
<!--
function displayMsg() {
    alert("Hello World!")
}
//-->
</script> 

That will prevent code from function .... to } from showing up on browsers that have Javascript disabled. You'll also frequently see tags.

It is also used for conditional comments, which are only supported in Internet Explorer, whereby you adapt your HTML to legacy browsers like IE6, so your shiny website doesn't break on old browsers. See here for more info.

Here's an example of conditional comments you might see:

<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->

That means if Internet Explorer is Version 8 (old and outdated) load that stylesheet.

For more information about comments, this is a good tutorial.

Is type=text/css necessary in a link tag?

It's not required with the HTML5 spec, but for older versions of HTML is it required.

Html 4 W3.org spec

http://www.w3.org/TR/html40/struct/links.html#edef-LINK
http://www.w3.org/TR/html40/present/styles.html

Type stands for The MIME type of the style sheet. The only supported value I have ever seen is Text/CSS, which is probably why HTML5 has dropped it. I imagine they had it for earlier versions to allow future expansion possibilities which never happened.

Using HTML5 and not specifying the type, I have run so far into no problems with compatibility even when testing older versions of IE.

Extracting only the css used in a specific page

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

i'd like to start by understanding the problem

Browsers make HTTP requests to servers. The server then makes an HTTP response.

Both requests and responses consist of a bunch of headers and a (sometimes optional) body with some content in it.

If there is a body, then one of the headers is the Content-Type which describes what the body is (is it an HTML document? An image? The contents of a form submission? etc).

When you ask for your stylesheet, your server is telling the browser that it is an HTML document (Content-Type: text/html) instead of a stylesheet (Content-Type: text/css).

I've already checked my myme.type and text/css is already on css.

Then something else about your server is making that stylesheet come with the wrong content type.

Use the Net tab of your browser's developer tools to examine the request and the response.

Positioning in CSS, when scaling the webpage the text & background shifts

Your HTML and CSS should look something like the example below.

Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid

Look into flexbox and grid for single axis and dual axis positioning

body {
  display: grid;
  grid-template-rows: 30% 1fr;
  min-height: 100vh;
  margin: 0;
  color: white;
  background-color: black;
}

header {
  background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
  background-size: cover;
}

header ul {
  display: flex;
  gap: 1rem;
  min-height: 10vh;
  list-style: none;
}

a:link,
a:visited {
  display: inline-block; /* Allows for padding and your rotation of [Play Now] */
  color: inherit;
  padding: .2em .5em;
  background: #000b;
  text-decoration: none;
  font-weight: bold;
}

main {
  background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
  padding: 2rem;
  background-size: cover;
}

h1 {
  font-size: 2.5rem;
  font-family: Courier New;
}

.playbutton {
  color: black;
  font-size: 3.5rem;
  font-weight: bold;
  transform: rotate(-7deg);
  border: 5px;
  border-style: double;
}

<!-- Use semantic HTML instead of divs with IDs -->
<header>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="how2play.html">How to Play</a>
      </li>
      <li>
        <a href="characterlist.html">Character List</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <h1>Murder Mystery</h1>
  <p id="text">Find the murderer, before it's too late...</p>
  <a href="homepage/thegame1.html" class="playbutton">Play Now</a>
</main>

Stylesheet not loaded because of MIME type

The issue, I think, was with a CSS library starting with comments.

While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.

Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

---

Related Topics