I'm maintain and old code that load css like below:
<style type="text/css">
<%= Rails.application.assets[filename].to_s.html_safe %>
</style>
It'd show in browser html like
<style type="text/css">
#charset "UTF-8";
/*
line 2, xxxx_path
*/
#div1 {
...
}
#div2 {
...
}
</style>
It works fine in local but when on production it shows in browser HTML like:
<style type="text/css">
#div1 {...}#div2{...}
</style>
and when I edit it as HTML it actually shows:
<style type="text/css">
#div1{...}#div2{...}
</style>
So it cause css selector is wrong because it seems #div1 instead #div1.
I want to know:
How to fix it?
why this happened?
why we use request to load CSS like stylesheet_link_tag will not have this problem?
BTW I tried rake asset:compile ENV=produciton still local is working fine.
Related
I've seen similar questions, but not this exactly.
Do CSS media queries have to be in an external CSS file to work properly?
I've got a client who I’ve only got access to an inline css block within WordPress. Their IT department has the CMS really locked down, and the only thing I have access to change is the CSS via a plugin called Improved Simpler CSS that puts an inline block of <style type="text/css"></style> before the <head> closes.
In doing the site, the browser seems to pick up the "inline" media queries OK, responding to changing the browser's width, but utilizing an iPhone or iOS simulator, I only get the desktop view, and I'm thinking iOS doesn't like the CSS not being externalized.
<style type="text/css">
/* Mobile-specific media query */
#media only screen and (min-width: 320px) and (max-width:767px) {
#wrapper,
.home #content,
.page #container,
.page .page,
#footer,
.page #content {
width: 100%;
}
#header {
margin-top: 50px;
margin-left: 20px;
width: 95%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 151px;
}
}
</style>
No, they don't have to be external...
MDN's docs on Media Queries demonstrates the two main ways of setting media queries:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media queries are perfectly valid within <style>, they don't have to be within an external stylesheet.
Make sure you include the viewport meta tag in your head (if you haven't already):
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also help if you include the CSS you currently have.
Help. Am learning HTML5/CSS. Things are going spiffy until I cannot debug my HTML/CSS markup.
Am using WeBuilder which auto-completes and has links to standard tools like Tidy and others.
Here is what I’ve tried
used an internal CSS link in my HTML: it works;
put the styles.css in same and in a css folder- BUMMER
have relocated both files to another HDD- BUMMER
both files validate with my available tools
I am sure the problem is in the HTML file and have fiddled with every modification I can find suggestions about. I have rewritten the HTML again using WeBuilder’s auto complete but have not done it in Notepad. I understand the basics of HTML and CSS plus am very familiar with files and folders so have directed the href correctly (even so have tried several ideas from W3C.
NOTE: I see in the "publish" here, it picks up the Arial font where mine has times. If Arial is not your default, I'm at a loss because the color doesn't show. Neither shows the color. If I can be of further help please advise. I really thank you for any help.
Here is my HTML markup:
<!DOCTYPE html5>
<html>
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type" content="text/htm; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content</p>
<h2>Third Title</h2>
<p>A paragraph of interesting content</p>
</body>
</html>
Here is the CSS:
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
This makes no sense:
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
It should simply be:
<link rel="stylesheet" href="styles.css" type="text/css" />
The <style> tags are only used for inline CSS in a page. So if you wanted to you could do this:
<style type="text/css">
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
</style>
But it is really better to keep CSS in a separate file.
Also, there is a minor issue with your DOCTYPE at the top of your HTML file. An HTML5 DOCTYPE is simply:
<!DOCTYPE html>
And not:
<!DOCTYPE html5>
The purpose of HTML5 is to—among other things—simplify document formatting & readability. So there is no such thing as <!DOCTYPE html5> it is simply <!DOCTYPE html>.
Currently I am using the JavaFx Webview to load a HTML page. But there is a problem when it loads the HTML page. It doesn't read the letter-spacing or -webkit-letter-spacing attribute in CSS. It's fine with the Chrome browser. How can I make it work in JavaFx?
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
.text {
letter-spacing: 20px;
}
</style>
</head>
<body>
<div class="text">
abcdefg
</div>
</body>
</html>
Looks like this property is not supported in JavaFX/JDK 7, but works for me in JavaFX/JDK 8. As far as I know, some of the WebViews rendering bugs fixed in JDK 8 won't be backported to JDK 7 and this one seems like being one of such bugs.
When I load my page, I see the original page (only for a short time) before Dart starts modifying the content. How do I avoid this?
Example:
File index.html
<html>
<head>
<script type="application/dart" src="app.dart"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
</body>
</html>
File app.dart
main(){
var d = new DivElement();
d.text = "This is a test";
query('body').append(d);
}
In this example I would first see a blank page, and then, shortly after, the text "This is a test". I would like only to see the text.
The page will display before the text, because your Dart code will run after the initial render (at least usually). You could apply some white layer on top of the document and remove it when your Dart code is done:
<body>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000000;"></div>
</body>
Then when your Dart code is ready to show the app:
query('#overlay').remove();
Now you will see a blank page until the Dart code is ready to show something.
If you load your JS scripts in the very start of the body, it will be executed before the page loads. So, you would do this:
<html>
<head>...</head>
<body>
<script src="packages/browser/dart.js"></script>
<script type="application/dart" src="app.dart"></script>
</body>
</html>
That should work. If it doesn't there is probably something going on internally in Dart, which causes this.
I have a simple web-app that I'm throwing together.
By & large, the default grails main.css is fine for all the scaffolded pages.
However, I want to supress this and use different, in-line css for the landing page.
How do I configure grails not to link main.css on a specific page?
The html is extremely simple, and contains no grails specific markup:
<!doctype html>
<html>
<head>
<meta name="layout" content="main" />
<title>My landing page</title>
<style type="text/css" media="screen">
body
{
background-color: #fff;
}
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img alt="Welcome!"
src="${resource(dir:'images',file:'Landing.png') }">
</body>
</html>
Also -- is main.css linked purely out of convention, or is there some configuration lurking somewhere I haven't spotted? (I've done a search but couldn't find it anywhere).
Can someone please reference where in the docs it talks about these conventions?
main.css is included in your landing page because you have specified that your landing page is based on the main layout
<meta name="layout" content="main" />
this layout is defined by grails-app/views/layouts/main.gsp and includes the main.css, most likely with a tag like this in the <head> of the page:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
If you remove:
<meta name="layout" content="main" />
your landing page will no longer be based on the main layout, so it will not include anything defined therein (e.g. main.css).
However, rather than removing the layout completely just to prevent main.css from being included, it may be simpler to just override the CSS rules that you want to cusomise on the layout page by including custom rules in a <style> block in the <head> of the landing page
<style type="text/css">
body {
/* styles in here override styles from main.css */
}
</style>
Take a look at the resources plugin in grails 2.0.x. You can define Modules comprising of specific javascript and CSS files which will be compressed, optimized for the web. In the page of your choice, you can include the module you want. In your case, you could add a case like this in your main.gsp
<g:if test="${controllerName == "landing"}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'custom.css')}"/>
</g:if>
<g:else>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"/>
</g:else>