I am using LESS CSS for WordPress Theme development. I have just noticed that when I compile the LESS files to CSS all of the comments placed inside LESS file are added to the top of the CSS file (and not on the right line)... is there any way to avoid this? I am using Less for mac as a compiler also tried the simpLess but the same problem occurs.
Whilst not ideal, and certainly against convention, I place my comments inside the style definition.
eg:
.style {
/* Comment for .style */
...style definition...
.inner-style {
/* Comment for .inner-style */
...style definition...
}
}
Related
Is there any way to use conditional statements in CSS?
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
No. But can you give an example what you have in mind? What condition do you want to check?
Maybe Sass or Compass are interesting for you.
Quote from Sass:
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
CSS itself doesn't have conditional statements, but here's a hack involving custom properties (a.k.a. "css variables").
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .block that's an .is-big or that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
The #supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:
#supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
#supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
The only conditions available in CSS are selectors and #media. Some browsers support some of the CSS 3 selectors and media queries.
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do
There is a hack in CSS for using conditional statements/logic.
It involves using the symbol '~'
Let me further illustrate with an example.
Let's say you want a background to slide into the page when a button is clicked. All you need to do is use a radio checkbox.
Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed.
Then you use the code below
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is.
css files do not support conditional statements.
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
<div class="oh-yes"></div>
<div class="hell-no"></div>
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
While this feels like a bit of a hack, and may not work perfectly in all browsers, a method I have used recently combines the fact that CSS (at least in Chrome) seems to ignore invalid values set on properties, and we can set custom properties that fall back to their default value when invalid.
(Note: I haven't deeply tested this, so treat it as a hacky proof of concept/possible idea)
The following is written in SCSS, but it should work just as well in standard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
I'm setting the custom property from JavaScript / React, but it would likely work regardless of how you set it:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
When chosenLoaderUrl is set to my url, that url is an invalid value for the display property, so it seems to get ignored.
When chosenLoaderUrl is set to an empty value, it falls back to the default value in my var() statement, so sets display to none
I'm not sure how 'generalisable' this concept it, but figured I would add it to the other suggestions here in case it is useful to anyone.
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
You can use combination of jquery and css classes i.e. I want to change a font color of certain element depending on the color of the background:
CSS:
.h3DarkMode{
color: lightgray;
}
.h3LightMode{
color: gray;
}
HTML:
<h3 class="myText">My Text Here...</h3>
JQuery:
var toggleMode = localStorage.getItem("toggleMode");
if (toggleMode == "dark"){
$(".myText").removeClass("h3LightMode").addClass("h3DarkMode");
}else{
$(".myText").removeClass("h3DarkMode").addClass("h3LightMode");
}
No you can't do if in CSS, but you can choose which style sheet you will use
Here is an example :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
will use only for IE 6 here is the website where it is from http://www.quirksmode.org/css/condcom.html , only IE has conditional comments. Other browser do not, although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit. You can use javascript to detect which browser you're using and use javascript if for whatever actions you want to perform but that is a bad idea, since it can be disabled.
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I am programming CSS for a symfony2 project. This project is already far programmed.
Now I added some div´s and a table. The table I can design more or less, but when I create new div´s and want to set these like:
div {
background: #f00;
color: #eee;
}
The browser shows nothing about these settings. They are shown in the HTML of the Browser but are totally not setted.
stupid mistake in css.
I made a comment before the first rule with two slashes:
//comment
.rule {
property: value;
}
which made probably skip the next rule and the browser didn´t rendered it as code. so just edited the comment from two slashes to /* comment */ and everything is good.
While this could possibly result in a simple yes or no answer I'll go for it anyway
Consider the following example:
HTML
<html>
<head>
</head>
<body>
<div class="foo">
<span class="bar">Hello world!</span>
<p>Some really interesting text.</p>
</div>
</body>
</html>
CSS
html {
/* some css */
}
body {
/* some css */
}
div.foo {
/* some css */
}
div.foo span.bar {
/* some css */
}
div.foo p {
/* some css */
}
Will the order in which css rules appear, have any effect on how (fast) the browser can render the page? ( in this example it won't really matter, but consider a real website with loads of html and css )
So the above css script will render faster or easier for the browser than :
div.foo p {
/* some css */
}
div.foo span.bar {
/* some css */
}
div.foo {
/* some css */
}
body {
/* some css */
}
html {
/* some css */
}
Do browsers care?
Should we?
Read before asking:
Is this how you would structure your CSS stylesheet?
What's the best way to organize CSS rules?
How do browsers read and interpret CSS?
I can't speak to order of the rules as it relates to speed.
However, as CSS stands for Cascading Stylesheets I consider it a moot point as the order of your rules does matter. So you aren't necessarily at liberty to move them around freely. Unless of course you supply continually more specific selectors (i.e. html body div.foo), which I think would have performance implications. If nothing else in file size.
In the end, remember that premature optimization is the root of all evil. Furthermore, there are other things that will have greater effect on speed (minification, static domain, etc) than rule order. Not to mention there is something to be said for code readability.
It matters for the importance of your selectors, adding details such as classes or IDs or parent elements will increase the importance of that rule over others.
Also, it may or may not decrease the speed of the browser who have to interpret it, but for sure it will increase the size of your CSS file to download and possibly be cached (not all handheld devices cache files bigger than a specified size).
CSS selectors specificity
It's typically not a good practice to strict type your classes and ID's to a specific element type.
div.foo {}
Will only work for Div's. Then you can't reuse that style elsewhere unless it's a Div element.
.foo { /* Base Style */ }
div.foo { /* Specific to if a DIV is used */ }
This is a slightly better approach.
After some more testing and reading I came to the following conclusion, no, it does not matter. Even after some ‘extreme’ testing, I could not find anything that supports the idea that the order matters.
There were no 'flashed of unstyled content' or the likes, it just took way longer to load the page ( way way longer :D )
Tests I ran
I created a test page with 60.000 div elements, each having a unique ID attribute. Each of these ID’s had their own css rule applied to it. Below that I had a single span element with a CLASS attribute, which was also had a css rule linked to it.
These tests created a html file of 2MB with a corresponding css file of 6MB.
At first I attempted these tests with 1.000.000 divs and css rules, but Firefox did not approve and started crying, begging me to stop.
I generated these elements and their css with the following simple php snippets.
<?PHP
for ($i = 0; $i < 60000; $i++) {
echo "
#test$i {
position: absolute;
width: 1px;
height: 1px;
top: " . $i . "px;
left: 0;
background: #000;
} <br />
";
}
?>
And
<?PHP
for ($i = 0; $i < 60000; $i++) {
echo "
<div id=\"test$i\"></div>
";
}
?>
The result was put in a html and css file afterwards to check the results.
Mind you, my browser ( Firefox 5 ) really did not appreciate me playing around with this, it really had some issues generating the output, the occasional this program is not responding message was not afraid to show it's face.
These tests were ran on a localhost, ran by a simple XAMPP installation, it might be possible that external servers result in a different resultset, but I am currently unable to test that.
I tested a few variations on the above:
Placing the element before all the generated divs, in the
middle and at the end
Placing the span’s css definition before, in the middle or at the end
of the css file.
Oh and may I suggest: http://www.youtube.com/watch?v=a2_6bGNZ7bA while it doesn't exactly cover this question, it does provide some interesting details about how Firefox ( and possibly other browsers )work with the stuff we throw at it.
The order doesn't matter in loading speed, it only matters when the styles cascade down, so you can't move them around willy-nilly. Using IDs may be faster than using classes, but you can only have one ID on a page. The best way to speed it up would be searching for things that have a class but are only used once, and changing it to an ID.
I'd say it's always best to order them in hierarchical order - so HTML is top, followed by body, followed by it's child rules.
I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.
This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.
I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?
If this is the case, is there any way of stopping this?
There are (at least) two means of doing this1, but they're both a little messy.
Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).
Use increased specificity to target the inserted html elements.
body {
/* targets the 'body', and these styles are inherited by its descendant elements */
}
body div {
/* targets all divs that are contained within the 'body' element */
}
body > div {
/* targets only divs that are directly contained within the body element */
/* and these styles will/may be inherited by the children of these divs */
}
The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:
.insertedDiv {
/* this will apply to all elements of class 'insertedDiv', but may be overridden */
/* by a more specific id-based selector such as '#container > .insertedDiv' */
But I can only think of these two at the moment.
CSS naturally "cascades", meaning if a container element has a property, it's children will by default inherit it. You can however, of course, override the value on the more specific items by redefining the style for them.
You'll need to inject CSS along with the HTML which specifies all the necessary properties for your popup. Unlike most CSS, you won't be able to assume any defaults, you'll need to specify for your div anything which might be overrode by the page. Make sure you refer to the div specifically by id in your CSS to ensure that your styles override that of the page, and that you don't inadvertently mess with the page's formatting.
You should start with a css reset stylesheet. But it has to be modified to only affect your html. So if you wrap your html in a div with a id like "23d4o829" you can use edit each rule in your reset style sheet so it only affects html that is within that div.
For example,
html, body { /* some stuff */ }
table { /* more stuff */ }
becomes
html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }
and so on. After that, you can have all the css rules you need to control your appearance.
EDIT: I think using iFrames as mentioned by David Thomas is better.