(Posts such as MVC #import html keyword show similar problems to mine, but the solution does not seem to fix my problem.)
I am trying to use the below code within a .cshtml file. The css #import conflicts with Razor, so I tried ##import but to no avail. I get runtime errors in Visual studio such as "The controller for path '/media/css/site_jui.ccss' could not be found."
<style type="text/css" media="screen">
#import "/media/css/site_jui.ccss";
#import "/release-datatables/media/css/demo_table_jui.css";
#import "/media/css/jui_themes/smoothness/jquery-ui-1.7.2.custom.css";
/*
* Override styles needed due to the mix of three different CSS sources! For proper examples
* please see the themes example in the 'Examples' section of this site
*/
.dataTables_info { padding-top: 0; }
.dataTables_paginate { padding-top: 0; }
.css_right { float: right; }
#example_wrapper .fg-toolbar { font-size: 0.8em }
#theme_links span { float: left; padding: 2px 10px; }
</style>
You can use double # to escape the #:
##import "/media/css/site_jui.css";
This will work:
#string.Format("#")import "/media/css/site_jui.css";
Related
I keep getting this error in css. This screenshot is on dreamweaver. I have also tried on brackets and codesandbox. Nothing seems to be working.
enter image description here
To answer your question you are using a valid SASS or SCSS with nested classes in a .css file and hence the error is shown. You can use this link to convert SASS to CSS: SassMeister
The equivalent css would be:
header {
display: flex;
height: 140px;
background-color: #A7ACB1;
}
header nav {
flex: l;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
Please use "code samples" in the editor to post your questions for the code snippet going forward.
I have a custom <my-header> element that generates a link in shadow dom, which I'd like to have styled the same as the other links in the surrounding page. The old applyAuthorStyles attribute was a decent way to accomplish that, although it had its own problems. Now that applyAuthorStyles has been removed, the option I see is to have embedders define their global styles as:
a, * ^ a { color: green; }
and so on, which intrudes into the styles of elements that don't want the page's styles.
Is there a better way to do this?
I have some sample code at http://jsbin.com/yusox/1/edit and below. You'll only see the inconsistency if your browser has native Shadow DOM turned on (chrome://flags/#enable-experimental-web-platform-features in Chrome).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
<title>Test</title>
<style>
body {max-width: 50ch;}
a { color: green; text-decoration:none; border-bottom: 1px blue dashed ; }
a:visited { color: darkgreen;}
</style>
<polymer-element name="my-header" noscript attributes="sec_num">
<template>
<style>
:host { display: block; }
header { font-weight: bold; margin: 20px 0; }
header::after { clear:both; display: block; content: " "; height: 0 }
</style>
<header>
<span class="section-number">{{sec_num}}</span>
<content></content>
<span style="float:right">[{{id}}]</span>
</header>
</template>
</polymer-element>
</head>
<body>
<my-header id="first.section" sec_num="1.2">Foo Bar Baz</my-header>
Polymer
</body>
</html>
intrudes into the styles of elements that don't want the page's styles.
Yes, intrusion will happen if you use *, so instead drive the style for your specific element:
a, my-header ^ a, body ^^ my-header ^ a { .. }
Fwiw, I don't think anybody is in love with this syntax, but that's the CSS that is supported today.
There are fancier solutions involving additional custom elements to manage dynamic, shared style-sheets, but it's a larger topic. Polymer will offer some kind of solution around these lines before long.
I'm trying to use http://startbootstrap.com/stylish-portfolio in my rails app however I'm getting the following error in my stylish-portfolio.css.scss.erb file:
ActionView::Template::Error (Invalid CSS after "body ": expected selector or at-rule, was "{"
This is my css file:
#import 'bootstrap'
/* Global Styles */
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
...
My guess is that you are missing a semicolon in the stylish-portfolio.css.scss.erb file, maybe after an SCSS variable definition?
Here's the original CSS file I assume you are basing this on, maybe you want to do a diff between that and yours to determine what has changed.
Edit: Yup, apparently there is a missing semicolon after the first line. The #import statement
#import 'bootstrap'
should instead be
#import 'bootstrap';
since you are using the .scss extension. You can omit the semi-colon if you are using the .sass extension.
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
I have created a test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* #import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
and now the file: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
When I use the above code, the site_header div does not have any formatting/background.
When I remove the link line from the HTML doc for site_header.css and instead use an #import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
The #import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any #import rules must precede all
other rules (except the #charset rule,
if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each #import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
First of all, you have invalid markup. The link tag must be closed...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
Lastly, I would not recommend using #import because it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
use #import rule into your main.css file like:
#import url("css/site_header.css");(this code should be on top of your main.css)
the above import snippet will bind your multiple css files into single css
then that main.css file use into your HTML.
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?
Are there any useful techniques for reducing the repetition of constants in a CSS file?
(For example, a bunch of different selectors which should all apply the same colour, or the same font size)?
Recently, variables have been added to the official CSS specs.
Variables allow you to so something like this :
body, html {
margin: 0;
height: 100%;
}
.theme-default {
--page-background-color: #cec;
--page-color: #333;
--button-border-width: 1px;
--button-border-color: #333;
--button-background-color: #f55;
--button-color: #fff;
--gutter-width: 1em;
float: left;
height: 100%;
width: 100%;
background-color: var(--page-background-color);
color: var(--page-color);
}
button {
background-color: var(--button-background-color);
color: var(--button-color);
border-color: var(--button-border-color);
border-width: var(--button-border-width);
}
.pad-box {
padding: var(--gutter-width);
}
<div class="theme-default">
<div class="pad-box">
<p>
This is a test
</p>
<button>
Themed button
</button>
</div>
</div>
Unfortunately, browser support is still very poor. According to CanIUse, the only browsers that support this feature today (march 9th, 2016), are Firefox 43+, Chrome 49+, Safari 9.1+ and iOS Safari 9.3+ :
Alternatives :
Until CSS variables are widely supported, you could consider using a CSS pre-processor language like Less or Sass.
CSS pre-processors wouldn't just allow you to use variables, but pretty much allow you to do anything you can do with a programming language.
For example, in Sass, you could create a function like this :
#function exponent($base, $exponent) {
$value: $base;
#if $exponent > 1 {
#for $i from 2 through $exponent {
$value: $value * $base;
}
}
#if $exponent < 1 {
#for $i from 0 through -$exponent {
$value: $value / $base;
}
}
#return $value;
}
Elements can belong to more than one class, so you can do something like this:
.DefaultBackColor
{
background-color: #123456;
}
.SomeOtherStyle
{
//other stuff here
}
.DefaultForeColor
{
color:#654321;
}
And then in the content portion somewhere:
<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>
The weaknesses here are that it gets pretty wordy in the body and you're unlikely to be able to get it down to listing a color only once. But you might be able to do it only two or three times and you can group those colors together, perhaps in their own sheet. Now when you want to change the color scheme they're all together and the change is pretty simple.
But, yeah, my biggest complain with CSS is the inability to define your own constants.
You should comma seperate each id or class for example:
h1,h2 {
color: #fff;
}
You can use global variables to avoid duplicacy.
p{
background-color: #ccc;
}
h1{
background-color: #ccc;
}
Here, you can initialize a global variable in :root pseudo class selector. :root is top level of the DOM.
:root{
--main--color: #ccc;
}
p{
background-color: var(--main-color);
}
h1{
background-color: var(--main-color);
}
NOTE: This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. More Info here
However, you can always use the Syntactically Awesome Style Sheets i.e.
In case Sass, you have to use $variable_name at the top to initialize the global variable.
$base : #ccc;
p{
background-color: $base;
}
h1{
background-color: $base;
}
You can use dynamic css frameworks like less.
Personally, I just use comma-separed selector, but there some solution for writing css programmatically. Maybe this is a little overkill for you simpler needs, but take a look at CleverCSS (Python)
Try Global variables to avoid duplicate coding
h1 {
color: red;
}
p {
font-weight: bold;
}
Or you can create different classes
.deflt-color {
color: green;
}
.dflt-nrml-font {
font-size: 12px;
}
.dflt-header-font {
font-size: 18px;
}
As far as I know, without programmatically generating the CSS file, there's no way to, say, define your favorite shade of blue (#E0EAF1) in one and only one spot.
You could pretty easily write a computer program to generate the file. Execute a simple find-and-replace operation and then save as a .css file.
Go from this source.css…
h1,h2 {
color: %%YOURFAVORITECOLOR%%;
}
div.something {
border-color: %%YOURFAVORITECOLOR%%;
}
to this target.css…
h1,h2 {
color: #E0EAF1;
}
div.something {
border-color: #E0EAF1;
}
with code like this… (VB.NET)
Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)
You can use multiple inheritance in your html elements (e.g. <div class="one two">) but I'm not aware of a way of having constants in the CSS files themselves.
This link (the first found when googling your question) seems to have a fairly indepth look at the issue:
http://icant.co.uk/articles/cssconstants/
CSS Variables, if it ever becomes implemented in all major browsers, may one day resolve this issue.
Until then, you'll either have to copy and paste, or use a preprocessor of whatever sort, like others have suggested (typically using server-sider scripting).
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<p> some red text </p>
You can change color by JS
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
document.documentElement.style.setProperty('--primary-color', 'blue');