I running this img code for different screen resolution
<img src="http://subtlepatterns.com/patterns/grey_wash_wall.png"
data-src-400px="http://subtlepatterns.com/patterns/dark_wood.png"
alt="">
#media (min-width: 400px) {
img[data-src-400px] {
content: attr(data-src-10px, url);
}
}
http://codepen.io/anon/pen/qEqbbQ
but it give an error in my chrome, it says "invalid property value". Screenshot:
what happens and why it didnt work??
content is only applied to pseudo elements. SPEC
The '::before' and '::after' pseudo-elements are used to insert content immediately before and immediately after the content of an element (or other pseudo-element). The 'content' propety is used to specify the content to insert.
Just a remind (which may be irrelevant). <img> cannot have :before/:after pseudo elements (it cannot have decendant elements at all).
Related
I have a POC that I have to complete and I am only allowed to use CSS to update the styles of a product. I have replaced one of the images of the product with a logo by using the CSS content attribute.
I have to add a simple string with a phone number to be shown after this logo. I have tried to use the :after pseudo-element to do this. This works only if the content of the div is empty (logo is removed).
.demo {
content: url('http://placehold.it/350x150')
}
.demo:after {
content: 'test';
display: inline-block;
}
<div class="demo"></div>
I have tried changing the display to inline-block and hard coding the heightand width for both rules. Essentially everything I could find. Any help would be greatly appreciated.
JSFiddle here: https://jsfiddle.net/qykbjznm/
The content property replaces all content within the element. By adding content to a non-pseudo selector, that content will replace the ::before and ::after pseudo selector.
So try doing this using the content property within the ::before and ::after pseudo selectors only.
.demo:before {
content: url('http://placehold.it/350x150')
}
.demo:after {
content: 'some text';
display: block;
}
<div class="demo"></div>
You could replace the background from the CSS and put it as an image in the HTML:
.demo::after {
content: 'test';
display: inline-block;
}
<div class="demo">
<img src='http://placehold.it/350x150'/>
</div>
Or even do this:
.demo {
background: url('http://placehold.it/350x150');
height:150px;
width:350px;
}
.demo::after {
content: 'test';
}
<div class="demo"></div>
There are two different results.
Some browsers apply the content property to actual elements, despite it not being supported in CSS2. css-content-3 is expected to allow this, but until the level 3 spec becomes a standard, which realistically won't happen for another few years (especially considering it hasn't happened in the last 14 years), applying content to actual elements should be considered non-standard behavior.
When the value of the content property is an image, that image is inserted as replaced content. And when this is applied to an actual element, this prevents the element from having ::before and ::after pseudo-elements. This is why your ::after pseudo-element doesn't appear.
As mentioned, all you have to do is apply the image to the element's ::before pseudo-element, not the element itself.
I have messed around with your JSFiddle a bit and I found that the only real way of making the phone number display below the current div is by creating another div:
<div class="demo"></div>
<div class="demo2"></div>
<style>
.demo {
content: url('http://placehold.it/350x150');
height:150px;
width:350px;
}
.demo2:before {
content: "test";
}
</style>
I have a simple media query that isn't working... here is my code:
In an external stylesheet:
#media screen and (max-width: 768px) {
.logo_1000{display:none !important;}
.logo_320{display:visible !important;}
}
Next, in the html of my PHP Header file I have two sets of Logo HTML, each in its own wrapper with one of the classes above:
<div class="logo_1000" style="margin: 0px auto 0px; width: 1000px; height:100px;">
<div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-1000x100.png" width="1000" height="100" /></div>
</div>
<div class="logo_320" style="display:none; margin: 0px auto 0px; width: 100%; height:100px;">
<div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-320-100.png" width="320" height="100" /></div>
</div>
It doesn't work because the browser will always use inline css over css defined by "" over external styles.
Maybe you want to use Chrome DevTools (F12), they will make your life much easier
there is value of display is not correct, there is no such a thing as visible, it should be something from the list defined to the property, see http://www.w3schools.com/cssref/pr_class_display.asp for valid values.
Usually, if you hover your mouse over the yellow warning mark, it says what is wrong.
You are misusing the display property of css.
The display property specifies the type of box used for an HTML element.
There is no such thing as display: visible;.
Have a look in here
inline Default value. Displays an element as an inline element like span
block Displays an element as a block element like p
flex Displays an element as an block-level flex container. New in CSS3
inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex Displays an element as an inline-level flex container. New in CSS3
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a li element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a table element
table-caption Let the element behave like a caption element
table-column-group Let the element behave like a colgroup element
table-header-group Let the element behave like a thead element
table-footer-group Let the element behave like a tfoot element
table-row-group Let the element behave like a tbody element
table-cell Let the element behave like a td element
table-column Let the element behave like a col element
table-row Let the element behave like a tr element
none The element will not be displayed at all (has no effect on
layout)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element.
Sample css:
#media only screen and (max-width: 768px) {
.logo_1000{display:none !important;}
.logo_320{display:block !important;}
}
SOLVED:
The problem was hiarchy of cascade rules. The external style sheet where the media query resided could not over-ride the display properties set internally in the HTML document. The solution was to move the internal css to the external style sheet, then show and hide the elements in the media query. Like so:
/****LOGO*******************/
/Fix for Mobile Phones/
/***************************/
.logo_1000{display:inline-block;}/ * Show the default * /
.logo_320{display:none;} / * Hide the Mobile * /
#media screen and (max-width: 768px) { / *now we're on mobile, swap the logos * /
.logo_1000{display:none !important;}
.logo_320{display:inline-block !important;}
}
I have this html and css code:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
#media all and (max-width: 400px), (max-height: 300px) {
.wrapper .a {
....
....
}
wrapper. .b {
....
....
}
....
....
}
Now I want that whenever wrapper gets the class "like-small", all the styles of small screen will apply even if the screen is not small. I don't want to duplicate the css code inside the media query. How can I solve that?
Another solution is to force media query to apply. Is there any way to do it?
You can try with javascript. This sentence sets the viewport width and forces browser to apply your media query:
$('meta[name="viewport"]').prop('content', 'width=400');
This is taken from this answer:
https://stackoverflow.com/a/20137580/1401341
As someone says in the comments, this will work only with browsers which support viewport tag.
You can do something like this with a bit of javascript.
In a nutshell, you'll move your media queries out of the css, and test them in JS using window.matchMedia.
When you know which one matched, you can add a className to the <html> tag, similar to the way Modernizr works. So on a phone you'd see <html class="like-small">.
Your css will be written to take advantage of those convenience classes, rather than using the native media query:
.like-small wrapper.a {}
.like-large wrapper.a {}
(I also like to add .not-like-small, .not-like-medium classes to <html> as well, to further simplify the css)
So now, after the regular media query is matched and the appropriate classname is appended to the document, RWD works pretty much as normal. And if you want to force a particular style you can just rewrite the classNames on the HTML tag to affect the entire page, or add a className to any parent element to affect only part of the page.
In newer versions of Chrome you can "emulate" a mobile device in order to trigger / test your media queries in a desktop browser. (Internet Exploder 11 has the same behavior!) You may have to refresh the browser after applying the emulation; Chrome 35 still partially applies the media queries until I hit refresh in the associated tab.
I know this question is old, but hopefully this is what you were looking for (as there wasn't an answer). And I also don't know if adding a specificity class to your CSS broke your requirement not to repeat CSS.
You can achieve what you want to do by changing the definition of your #media query. Basically, instead of saying you want something to happen when the screen gets smaller than a value, keep your small screen CSS OUT of the media query and have your media queries set up for larger screens.
Then, you just need to change the order that you call the CSS and add specificity to the styles where you want to call the class like-small.
HTML:
<div class="wrapper like-small">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.wrapper.like-small .a,
.wrapper .a {
height:200px;
width:200px;
background:purple;
}
.wrapper.like-small .b,
.wrapper .b {
height:200px;
width:200px;
background:blue;
}
#media all and (min-width: 400px), (min-height: 300px) {
.wrapper .a {
height:100px;
width:100px;
background:yellow;
}
.wrapper .b {
height:100px;
width:100px;
background:red;
}
}
And the fiddle: http://jsfiddle.net/disinfor/70n37hhj/
Hopefully this is what you were after (over a year and a half ago :)
Add the same class for those sections.
<div class="wrapper">
<div class="makeMeShine a"></div>
<div class="makeMeShine b"></div>
</div>
Where a and b can have their own custom styles :)
I'm putting together some Responsive CSS for a website I'm building and I'm curious if I can use CSS to force images to render as alt text instead of images. We are displaying the logos of cosponsors but because of their variable size it's hard to fit them confidently into the responsive design. For that reason we'd like to store the company name as alt text and render that instead. Of course we could place the name in a separate element and toggle the visibility using CSS but using alt text seems DRYer.
You could store that in a data-attribute rather than the alt text, and then do something like this:
<span class='responsive' data-alt='foo'>
<img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>
#media only screen and (max-width: 300px) {
.responsive:before {
content: attr(data-alt);
}
.responsive img {
display: none;
}
}
The reason you can't do this just with CSS and an img tag is that img tags is because they are replaced elements, which means pseudo doesn't work with them, and therefore, using :before doesn't work with them.
Another approach, taking this into account would be the following:
<span class='responsive'>foo</span>
.responsive {
background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
text-indent: -9999em;
overflow: hidden;
width: 180px;
height: 180px;
display: block;
}
#media only screen and (max-width: 300px) {
.responsive {
background-image: none;
text-indent: initial;
overflow: initial;
}
}
If you ask me, I like the second approach a lot more.
Went with:
<div class="cobranding">
<span>Brought to you by</span>
<span class="sponsor">Joe Shmoe Inc.</span>
<img src="img/graphics/joe_shmoe_logo.jpg">
</div>
Using CSS to toggle the visibility of the img or the "sponsor" based on responsive breakpoints.
Both of Nico's approaches look good. The only hiccup is that these cosponsor logos are going to be added via a CMS so I want to steer away from any solution involving case-by-case CSS (:before or background-image). For the sake of time I went ahead with the two element strategy above.
(answered for any others looking for a solution)
Important aside:
Remember the purpose of alt: to display meaningful ALTERNATIVE information (if the image doesn't load).
- so any implementation should not break that... (bad for accessibility & SEO).
That said...
If the image doesn't load, the alt will be displayed. So (untested) but you could try messing up the src attribute by javascript... this should cause the browser to display the alt since the image wont load.
- you might find this approach along with lazyload useful.
Also to note: a broken img doesn't behave like an image, so you can apply a img:before css rule (and use content: attr(alt) )
I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>