Visibility Rule Not Working in Media Queries - css

I have the following code in my _header.html.erb
<a class="navbar-brand" href="#"> Brand </a>
I want this to display on mobile but not on large displays...
I have:
.navbar-brand {
visibility:hidden;
}
in my general css.
I use media queries to counter the above code, but not successfully.
#media screen and (device-aspect-ratio: 40/71) {
.navbar-brand{
visibility:visible;
}
}
The result is that, the brand shows up no-where.
The code above is intended to target an iPhone5. Is it possible that other devices have the same a-r and the display won't be shown? Or is the above #media an appropriate way to accomplish what I am trying to achieve.

I would advise using width for media query to target phones, if your okay with a person minimizing the browser's width and seeing the same result
.navbar-brand {
display: block;
}
#media only screen
and (max-width : 321px) {
.navbar-brand {
display: none;
}
And yes it is possible other devices have the same ratio. Specifying this way is troublesome from my experience, and I advise the way above. If you really want to target a specific device, do a quick script check for user agent string of the specific device and load css special for that device below your regular css.

In CSS, if you have two rules that target the same element, there are a number of factors that control which one applies. The two that matter to us are specificity and order.
Specificity means "which rule is more specific?". Consider this HTML:
<div>
<p>Test</p>
</div>
And this CSS:
div p {
color: red;
}
p {
color: blue;
}
In this case, the text will be red. div p is a more specific selector, so that rule overrides the red text set by the p selector.
If two rules have the same specificity, then the order comes into play. Later rules have precedence. Let's change our CSS above to the following:
div p {
color: red;
}
p {
color: blue;
}
div p {
color: green;
}
Now we have two rules with the same specificity. The last one will apply, so our text will be green.
So how does this relate to your problem? In two ways:
Media queries don't increase specificity.
The Rails asset pipeline can change your CSS ordering.
If your mobile CSS is included in the same file as your desktop styles, make sure it's at the bottom of your file, so your mobile rules override your global rules above. And if you're putting it in a separate file, you're going to have to list all of your CSS files in app/assets/stylesheets/application.css and put your mobile.css at the very bottom of your //= require rules, so it gets loaded after all the others. If you allow the Rails //= require_tree . to include your mobile stylesheet, the order will be undefined (but is almost always alphabetical). Which means that your mobile rules won't apply if they're trying to override something in a file starting with something from the second half of the alphabet. Your un-media-queried rules will override the media queried ones.

I realize this is old, but the answer for me was slightly different, and while I don't like my answer as I try to avoid using (!important) when possible, the only thing that worked for me currently was to add !important after my desired visibility setting in the media query.
.menuNavDropdown {
visibility: visible !important;
}

Related

Correctly apply CSS for responsive text

I am trying to reduce the size of some titles of my commerce in responsive version. I have tried a bit of css but nothing has worked.
At the moment, I have the following for the main slider text:
#media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}
This is my web
enter image description here
Where am I going wrong?
Your css path currently looks like this.
#media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}
Without the associated HTML its hard to say but my initial guess is the classes that are already applied on it have greater importance than your new media query. I would try this adding !important and if it doesnt work make your selector more specific.
#media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}
fun things to note about selector importance:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
currently your media query css selectors have a value of 20 points because there are 2 class names pointing to the change
CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, !important has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the cascade order of stylesheets. Not the best practice but it works well often

Setting the min/max width of a media query with css variables (without SASS/LESS)?

I am in the process of developing a new starter theme for myself. Within it, I have a number of breakpoints I wish to use throughout the theme. Rather than manage the breakpoints for every single media query, I wanted to set CSS variables as the breakpoint pixel value and call on the variable inside the media query. Below is an example of how (ideally) this would work
:root {
--medium: 1024px;
}
p {
color: black;
}
#media screen and ( min-width: var(--medium) ) {
p {
color: red;
}
}
<p>Text I want to be red in screens larger than 1024px.</p>
This logic sadly does not work in regular CSS/CSS3. Is anyone familiar with a method of creating a single point where I can adjust media query breakpoints for the whole theme without using a preprocessor? Thanks in advance!
This is not currently possible as referenced above by #rangerz.
I have taken to just splatting the actual values in the media queries in all of my CSS files marked with a comment:
:root {
--breakpoint-md-max: 767.98px /*var(--breakpoint-md-max)*/;
--breakpoint-md-min: 768px /*var(--breakpoint-md-min)*/;
}
#media (min-width: 768px /*var(--breakpoint-md-min)*/ ) {
#body {
background: green;
}
}
This allows me to do a global replacement if I ever need to change this "constant" value.
Plus, one day, when env() is supported, I can remove this unsightly blemish in one shot. :)
You can accomplish this with matchMedia.
I gave a usage example in this answer.

Triggering styles that apply with a different selector, via media queries

The code I have is as follows:
there is one HTML that have two views, a list view and a card view and the user can choose whichever he/she prefers. when the user clicks card view I add a class card view to a parent element and I trigger css for that selector for example list view will be .order{} card view will be .card_view .order{} now I want to make that when mobile (with media queries) it should only apply the card view.
If someone can help I'll appreciate it, thanks in advance.
.order,
.card_view {
/* same properties for both CSS selectors - both will look the same */
color: white;
background-color: #ddd;
}
#media( min-width: 480px ) {
.order {
/* override styles for larger screens for this CSS selector - different looks */
color: red;
}
}
Any viewport less than 480px wide would use the same styles for .order and .card_view since they have the same definition. At 480px and above, .order would use the re-defined styles in the media query and they now have different definitions and will be styled differently.

Which background-image takes precedence.media query or css?

My question is about background-images. I was designing a home page for iPhone screen and I wanted to use a slightly different image for the mobile version. My media query was not in a separate css file, just embedded in the index.html. Problem...the main css image was overriding my query image. I checked for extra brackets etc. I thought the media queries had precedence over the main css? Would I have got my desired result if I had put the Media query in a css link file?
Here is my main css code:
#container
{
background-image:url(images/1000_framec.jpg);
background-repeat:no-repeat;
width:999px;
height:980px;
margin:0 auto;
}
and below is my media-query code:
#media only screen and max-width 320px {
#container
{
width:98%;
background:url(images/1000_frameo.jpg) no repeat left;
margin-top:80px;
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
}
}
Media queries and #media rules are CSS. But these are transparent to the cascade, so whether you put a style rule in a #media rule or not, or whether you place it in a linked stylesheet that has media="..." or not, doesn't affect the precedence of that rule in the cascade.
The rest of the cascading rules apply as usual: the most specific selector wins, the last of a series of equally specific selectors wins, an inline style has more precedence over an internal stylesheet, which in turn has more precedence over an external stylesheet, and so on.

CSS Equivalent of the "if" statement

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.

Resources