I want the normal line-height, plus 4px. I have tried
line-height: normal + 4px;
but that doesn't work.
(Note: I don't want approximations using percentages.)
Why not just take aways Chromes little focus glare?
use the css property outline: none;
http://jsfiddle.net/XF6fS/
You can't do any arithmetic in CSS. Libraries like LESSCSS allow you to do certain things, but you can't get properties of rendered elements.
You could use percentages to get an approximation, however you should probably set an explicit line-height for the elements; this will be the same accross browsers.
Running this JSFiddle shows the following results:
FireFox 6: 20px
IE 8: normal
Chrome 13: normal
Set an explicit height; it's going to be much better compatible with all browsers.
There is no direct way to do it. As said, you cannot do any calculations in CSS files. That's why we keep saying that CSS is not complete, we have to make floats to display our pages properly, which is nonsense when you think about it.
As you have created the css, you can add 4pt yourself. If you don't want to hard-code, you can use CSS frameworks or other languages that create CSS output. Frameworks are fine, but I do not recommend using other languages that create CSS output for you. This is fun, but you will not learn the language and since CSS is a hard-to-understand language, you will stuck if you have any errors, misplacements on your page.
So, about your question, you can use javascript to getComputedStyle and add 4pt and set the style of the element.
This is the javascript that gets the style:
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
Usage:
var height = parseInt(getStyle("elementId", "line-height"));
var earlycss = document.getElementById("elementId").style.cssText
document.getElementById("elementId").style.cssText = earlycss + "\nline-height: " + (height + 4) + "px;";
try -
line-height: -moz-calc(normal + 4px);
But ya this wouldn't be an ideal solution due to cross browser issues and well older browsers won't ideally support this. :). And for further reference - http://www.w3.org/TR/css3-values/#functional-notation
im quite sure you can't do math like that with css
try using some javascript to get the line-height and then add 4
You can try using line height in percentage. Eg: Line-height:110% if you want to do it purely in CSS
You could try using em's to define your line height, and then assuming you know the size of your font you can ensure that it's +'x'%
The problem is of course that 90% of the time you can't know the size of your font (or rather that someone won't fiddle with it).
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.
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
I need to remove the after the value of given spans.
The HTML looks like this:
<span class="number">0.15 </span>
The
is coming from the server (CMS).
Is there any way to remove the by using CSS rules?
If this value is provided by your CMS, it's posible you can modify the value with php via str_replace(' ', '', $yourVar) before echo it in your span.
If you can't access with this, you can also use jQuery to do this... Just like Muhammad Ali said:
var str = $('.number').html();
str = str.replace(' ', '');
$('.number').html(str);
Something like this could work. But with CSS, isn't posible I guess.
You can't do this with only css. Somehow you have to use jquery for this. With Regular Expression you can simply do this.
var span = $('span').html();
span = span.replace(/ /g, '');
$('span').html(span);
DEMO
Note: is coming from CMS them you have to use jquery code to replace it when your document loaded fully.
$(document).ready(function(){
var span = $('span').html();
span = span.replace(/ /g, '');
$('span').html(span);
});
You cannot possibly remove characters from document content with CSS. That’s not what CSS is for. You can add characters to be rendered, with generated content, but not remove.
However, you might be able to undo the effects of a character on rendering. Consider the following example:
<span class="number">0.15 </span>foo
The no-break space ( ) has two effects: it causes visible spacing, the same as a normal space character, and it prevents line break between “0.15” and “foo” when the browser formats the text. To prevent the latter effect, you could add a normal space using generated content, but then there will be too much spacing when a line break does not appear. To fix this, set the width of the pseudo-element to zero:
.number:after { content: " "; display: inline-block; width: 0; }
To remove the spacing effect of the no-break space, you can set a negative right margin. The main problem with this is that the width of a no-break space (and a space) depends on the font. It is on the average about one fourth of an em, but it may vary considerably. If you can regard the font as fixed (e.g., you are using #font-face), you can use the following code, with just the numeric value tuned as needed:
.number { display: inline-block; margin-right: -0.25em; }
As a side effect, this may also allow a line break between “0.15” and “foo”, since browsers may handle inline blocks in formatting so that they always allow line breaks before and after.
you can use javascript/Jquery framework to remove any charackey like this exampe Here
var span = $('span').html();
span = span.replace(' ','');
$('span').html(span);
Although you can not remove completely using CSS, the CSS rules below can enforce the behavior of a normal space.
overflow-wrap: break-word;
word-break: break-word;
.w(#w, #h){
width: (#widget-w * #w) + (#widget_margin_right * #w);
height: (#widget-h * #h) + (#widget_margin_bottom * #h);
}
[class*='w_']{
.w(1,1);
}
So in this I have html elements with a class that determines the width and height of the element.
Like so....
And this div is going to be
#widget-w = 228px;
#widget-h = 194px;
Now I had it like this
.w_1x1{
.w(1,1);
}
.w_2x1{
.w(2,1);
}
But I'd like it more automated to fit for any size i want at any time
So i'm trying to make a mixin that i can pass into the class name to simplify it.
I believe you would have to do that with javascript/jquery. LESS is great for calculations, but it's compiled BEFORE the page is laid out.
In other words, it would not be able to dynamically pull the height or width unless it ran the compiled CSS after the page had already rendered and been styled.
So that is a no.
Some extra info:
LESS is a CSS preprocessor, which means it is designed to process before the browser loads anything on the page. Hopefully, you're using a compiler to compile your LESS into CSS, and not compiling client side (which is not recommended).
When using IE, you cannot put an absolutely positioned div over a select input element. That's because the select element is considered an ActiveX object and is on top of every HTML element in the page.
I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.
FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.
Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.
Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:
#MyDiv iframe
{
position: absolute;
z-index: -1;
filter: mask();
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 9999px;
height: 9999px;
overflow: hidden;
}
Does anyone have an even better solution than this one?
EDIT: The purpose of this question is as much informative as it is a real question. I find the <iframe> trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.
I don't know anything better than an Iframe
But it does occur to me that this could be added in JS by looking for a couple of variables
IE 6
A high Z-Index (you tend to have to set a z-index if you are floating a div over)
A box element
Then a script that looks for these items and just add an iframe layer would be a neat solution
Paul
Thanks for the iframe hack solution. It's ugly and yet still elegant. :)
Just a comment. If you happen to be running your site via SSL, the dummy iframe tag needs to have a src specified, otherwise IE6 is going to complain with a security warning.
example:
<iframe src="javascript:false;"></iframe>
I've seen some people recommend setting src to blank.html ... but I like the javascript way more. Go figure.
As far as I know there are only two options, the better of which is the mentioned usage of an iframe. The other one is hiding all selects when the overlay is shown, leading to an even weirder user experience.
try this plugin http://docs.jquery.com/Plugins/bgiframe , it should work!
usage: $('.your-dropdown-menu').bgiframe();
I don't think there is. I've tried to solve this problem at my job. Hiding the select control was the best we could come up with (being a corporate shop with a captive audience, user experience doesn't usually factor into the PM's decisions).
From what I could gather online when looking for a solution, there's just no good solution to this. I like the FogBugz solution (the same thing done by a lot of high-profile sites, like Facebook), and this is actually what I use in my own projects.
I do the same thing with select boxes and Flash.
When using an overlay, hide the underlying objects that would push through. It's not great, but it works. You can use JavaScript to hide the elements just before displaying an overlay, then show them again once you're done.
I try not to mess with iframes unless it's absolutely necessary.
The trick of using labels or textboxes instead of select boxes during overlays is neat. I may use that in the future.
Mootools has a pretty well heshed out solution using an iframe, called iframeshim.
Not worth including the lib just for this, but if you have it in your project anyway, you should be aware that the 'iframeshim' plugin exists.
There's this simple and straightforward jquery plugin called bgiframe. The developer created it for the sole purpose of solving this issue in ie6.
I've recently used and it works like a charm.
When hiding the select elements hide them by setting the "visibility: hidden" instead of display: none otherwise the browser will re-flow the document.
I fixed this by hiding the select components using CSS when a dialog or overlay is displayed:
selects[i].style.visibility = "hidden";
function showOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "visible";
selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "hidden";
}
}
function hideOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "visible";
}
}