I have some code that is not rendering correctly in the minified output.
Here's the basics:
I have a mixin:
.Aspect(#widthRatio:16; #heightRatio:9; #useableWidth:100%) {
display:block;
overflow:hidden;
max-width:#useableWidth;
&::before {
content:"";
float:left;
padding-top:percentage(#heightRatio / #widthRatio);
}
}
... and some styles:
.backdrop {
position:absolute;
top:0;
left:0;
width:100%;
.Aspect(1; 1);
.Landscape({
.Aspect(16; 9);
});
}
.app-bar-spacer-3 {
height:250px!important;
background-color:Lime;
}
Here's what's happening.
The .app-bar-spacer-3 style is not working, however it's due to the rendering of the previous style .backdrop.
I can make it go away by removing the pseudo element in .Aspect() but obviously that isn't a fix.
The code seems ok in the none minified stylesheet but on inspection in Chrome, this is what is being output:
.backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
overflow: hidden;
max-width: 100%;
}
.backdrop::before {
content: "";
float: left;
padding-top: 100%;
}
#media screen and (orientation: landscape) {
.backdrop {
display: block;
overflow: hidden;
max-width: 100%;
}
.backdrop::before {
content: "";float:left;padding-top:56.25%}.app-bar-spacer-3{height:250px!important;background-color:#0f0}
There's actually more but as you can see all the code following is being output inside the curly brackets belonging to the pseudo element.
I've looked at it so long I'm not sure whether it's my code or LESS.
Anyone advise?
After much, much testing, I found the root cause of the issue.
It does in fact eminate from code further up the stylesheet, but doesn't actually break until it hits the above code.
Here's the code that broke LESS:
.md-text-tab {
&:not(:last-child)::after {
content:'\\';
}
}
More specifically, it's the escaped slash.
Related
as I understand from here, I can't place my CSS selectors which contains "pseudo browsers selectors" (-moz-range-track, -webkit-slider-thumb, and so on) separated by comma, because if browser did not recognize one of the selectors then will ignore all the rules in curly brackets {}.
So when I try to compile my LESS rules:
input {
&[type=range]{
&::-moz-range-track,
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
In the result I will see:
input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
Which will not work because of reason I mentioned earlier.
So in LESS I have to do it like (it isn't of course LESS style):
input {
&[type=range]{
&::-moz-range-track
{
width:100%;
height: 32px;
}
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
Which compiles to:
input[type=range]::-moz-range-track {
width: 100%;
height: 32px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
And works as expected.
And my question, is there any possible to do it looks nicely in LESS?
regarding the css media queries, is there any possibility to call a page (html template) when the screen resolution is less than a predefined value please ?
I'm not a site developper and actually I'm not so sure how to build the css style...
Thank you,
LE: it's about redirecting to a specified page, could be html in the end , something like this .Is this possible somehow ? Not so sure how to compose the url part.
.getbacktodesk {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: #f9f9f9;
}
.getbacktodesk:before {
background: url(http://neuegrid.com/?page_id=404404);
}
#media (max-width: 800px) {
.getbacktodesk {
display: block;
}
header, row, logoimg, #scroll_totop,
nav,
._page {
display: none;
}
}
<div class="getbacktodesk"></div>
I am not sure if this way is okay, you cannot action a php script via css!
<style>
#media (min-width: 600px) {
body*{display:none;}
//will display no element
.alertmessage{display:block;}
//Put message in this div and display none in normal css queries.
}
</style>
I'm having an issue with the pseudo-class :hover in Google Chrome.
Basically I have an element that when in :hover state it's sibling is displayed. This works fine.
Then I add a media query so that when the viewport has a specific min-width the element is no longer displayed but the sibling is.
When going from the min-width to a smaller width the display:none on the sibling no longer fires.
It might be easier to understand by taking a look at this example. Try resizing the viewport.
http://jsfiddle.net/5gPGR/1/
HTML
<div id="container">
<div id="trigger">
</div>
<div id="target">
</div>
</div>
CSS
#container {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 24px;
line-height: 80px;
background: #777;
box-sizing: border-box;
}
#trigger {
position: absolute;
display: block;
width: 50%;
height: 80px;
top: 0;
right: 0;
background: #275;
}
#target {
position: absolute;
display: none;
width: 50%;
height: 80px;
top: 0;
left: 0;
background: #f57;
}
#trigger:hover ~ #target {
display: block;
}
#media screen and (min-width: 400px) {
#trigger {
display: none;
}
#target {
display: block;
}
}
This is only an issue in Chrome/Chrome Canary. I have tested in the latest versions of:
Chrome
Chrome Canary
FF
IE
Safari
Opera
Is there something I can do to resolve this or do I just need to stick with javascript for these kinds of interfaces.
EDIT:
I forgot to mention that if I force the element state to :hover using chrome dev tools it starts working again until the next resize.
Interesting error, I'm not sure why that happens
I was able to fix the issue by adding an empty #target:hover { }
Demo
If you're using a preprocessor that would remove this line, you can add a property that you already have, like #target:hover { display:block; }
This is a pared down version of a problem I am facing with IE7. In all other (newer) browsers, this displays fine... why does position:relative; have an effect on float: right; or float: left;? Is there a way to keep the position: relative without sacrificing the functionality of float?
JS fiddle: http://jsfiddle.net/uW7JV/2/
Without position: relative;
With position: relative; (on the red box)
Even more trimmed-down version: http://jsfiddle.net/uW7JV/4/
Interesting... Removing the <div class="clearboth"></div> allows the content to show. However, I do need that functionality there, so I'm still looking for a fix. http://jsfiddle.net/uW7JV/9/
You need to add overflow: hidden to .column-wrapper so that it wraps its floating children. You won't need the .clearboth div and CSS at all after you do this.
The other issue you need to solve is column widths, since box-sizing: border-box is not supported in IE7, you need to account for your padding when assigning width.
div {
padding: 5px 1%;
}
.column-wrapper {
background: orange;
position: relative;
overflow: hidden;
}
.main {
background: yellow;
float: right;
width: 64.6%;
}
.sidebar {
float: left;
background: green;
width: 31.3%;
}
DEMO: http://jsfiddle.net/myajouri/uW7JV/15/
Another way to go about this is to use the Clearfix hack
.clearfix {
zoom: 1; /* for IE6/7 */
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then add the clearfix class to .column-wrapper.
I have the next CSS code:
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
Now I want to execute the first just in Google Chrome and Safari, and the second in other browsers.
I tried this, but second code seems to be executing always:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
How can I fix that?
The problem is that you're overriding your webkit styling with the non-webkit styling.
Reversing the order should fix this:
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
You may also want to check that your -webkit-min-device-pixel-ratio fires on all webkit-using devices, but it probably does.
For reference, Cascading Style Sheets are read from top to bottom. The key word is Cascading. If one CSS rule is given before an identical CSS rule, the latter one will take precedence. In your example you were styling specifically to webkit browsers but then overriding it with the general styling rules. Reversing the order means that the webkit styling here will override the general styling (without affecting non-webkit browsers).