I'm having a small problem with Less . I can't seem to get it working. I'm running it client side. It just doesn't create the CSS, the page stays unstyled.
Header
<!-- Include LESS Stylesheets -->
<link rel="stylesheet/less" type="text/css" href="/includes/style/general.less" />
<!-- Include Scripts and Co -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
Index
<body>
</body>
general.less
#rcmsblue: #8AE9FD;
body{
background-color: #rcmsblue;
}
Am I doing something wrong?
Questioner might get the solution, here is a good info on slash rules. Few other points to consider when use LESS:
Include your stylesheets before the script and when you link more
than one, each of them compiled independently so any variables,
mixins or namespaces defined in a stylesheet are not accessible in
others. Detailed usage information available at
http://lesscss.org/usage/
And, don't forget to add MIME type that are associated content types served as static files by the web server.
File name extension: .less
MIME type: text/css
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.
I'm trying to prepare a default error page. In error.html file I use:
<link href="css/bootstrap.min.css" rel="stylesheet">
In tornado Application I use following routing instruction:
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
Let's say I type http://localhost:8888/api url. Everything is fine and css file is loading correctly and error page is rendered fine. However when I type http://localhost:8888/api/foo the css file is not found.
In the first situation the css request http://localhost:8888/css/bootstrap.min.css is handled correctly by the handler. In the second approach the request for css is translated to http://localhost:8888/api/css/bootstrap.min.css which is not handled.
I want the resources to be found in both situations to correctly display error page. I can use:
(r'.*/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
However this time I can type into browser http://localhost:8888/api/asdasdsadsad/css/bootstrap.min.css url and the css file is dispayed while I think there should displayed error page. How may I get rid of this problem?
It is because you use relative paths. There are two common ways to fix this:
use absolute urls. Add / (slash) before any resource, so instead of <link href="css/bootstrap.min.css" rel="stylesheet"> use <link href="/css/bootstrap.min.css" rel="stylesheet">
add <base> to page in <head> section
Base ... specifies the base URL to use for all relative URLs contained within a document.
<base href="http://www.example.com/">
And leave the handler as
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'})
the latter is working because it's regex is very broad, as you notice it handles request that should be 404. The good practice is to have routes as specific as possible.
<!--#include virtual="filename.htm"-->
Currently, I don't see include file (html) content when I open page in browser.
You use virtual= if the file you are calling for is in a different directory from the page which is calling for it.
Otherwise you use file=.
Rule of Thumb
Use file= when the included file is within the same directory as
the page that wants it.
<!--#include file="included.html" -->
Use virtual= when it isn't.
<!--#include virtual="/directory/included.html" -->
That forward slash before the first directory is representative of the
domain name (server root). By using that leading slash, the server
will add the domain name to the front of the address for you.
Source: http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341
Additional Notes...
Perl-based Server Side Includes (SSI) of the format:
<!--#include virtual="/directory/included.html" -->
are not the only type of SSI you can deploy.
Alternatives include:
1) ASP Includes (for Windows-based servers):
<!-- #include virtual ="/directory/included.html" -->
2) PHP Includes (for Linux-based servers):
<?php include '[...SERVER_PATH...]/directory/included.html'; ?>
3) HTML Imports (Becoming more widely available...)
<link rel="import" href="/directory/included.html">
N.B. HTML Imports work slightly differently to the other 3 types of include, given that they are only declared in the <head> of a page (not in the <body>) and once loaded, are intended to be manipulated within the DOM via Javascript...
Story time
I have a purchased/rented typeface whose license asks me to query a unique counter on their domain every time the typeface is shown. Sadly, their suggestion is to call it in the CSS file with import, which blocks rendering for the duration of the call. It is also weird since according to the license they wish to track individual page views yet if the CSS file in question is cached, won't that prevent the import from being called again until cache clears?
In any case, I removed the import call, but then began to ponder what exactly should I replace it with. What tag would give me a non-blocking call that would work universally across browsers and irregardless of disabled features? A link with rel=prefetch? HTML5, it didn't work in IE7 when I tested it. And it would also feel awkward since it implies the resource should be cached yet the response contains a No-Cache directive. A script tag with defer and async attributes at the end of the page? Maybe, but what if someone has disabled scripting? I could add a noscript tag and then an image tag inside it as a fallback. But! Will the image display as broken for some browsers since the image contents are an empty string? And what if someone has scripting AND images disabled? Oh no! World must be a pretty bleak place for them, I must admit. Oh, oh! What about embed/object? Now that's just wrong, stop touching me funny.
I ended up going with just a plain image tag for now, but what would be the magical combination that would cover the widest range of edge cases? I could add the script tag for example to support those without image loading on.
My intrigue here is purely scientifical so I'm not really looking for alternative typeface providers or to discuss how unlikely previously described situations are. Also, why they provide me with the actual font file to serve from my own server and then trust me to call the counter honestly is beyond me.
Code
Let's imagine my unique font counter is located at http://font.foo/bar and the font.foo server is acting slow.
Starting point
// fonts.css
#import url('font.foo/bar')
#font-face { ... }
// index.html
<link rel="stylesheet" href="fonts.css">
Separate link tag
// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">
rel=prefetch
// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">
Deferred async script load
// Problem: Won't work when user has disabled scripting
// index.html
<script src="font.foo/bar" async defer>
</body>
Script tag with added image fallback
// Problem: Won't work when user has disabled scripting AND images
// index.html
<script src="font.foo/bar" async defer>
<noscript><img src="font.foo/bar" alt=""></noscript>
</body>
Maybe mix it this way?
You have the script options and keep using a link element instead of an img
<script src="font.foo/bar" async defer>
<noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>