I was just checking how css expressions with modernizr classes work.. and as I see on Google dev. tools with below:
//normal css
.box{
width:100px;
height:100px;
border-radius:20px;
background:blue;
//as modernizr detects no support..
.no-borderradius .box{
background:url(radiusyImage.png);
}
'radiusyImage' does not add extra http request.. I know that is possible(load the source only it is necessary) with js:
if (!Modernizr.borderradius) {
//load img or a pollyfill..
}
but how is that possible with css? How does it work actually?
Current browsers don't request images they won't use in the html See this question.
Since Modernizr will only add the no-borderradius class only if the browser doesn't support that attribute, any modern browser won't have a DOM element matching .no-borderradius .box therefore, the image will not load.
The only drawback here is to have a few more lines of styles in your CSS, but its impact is unnoticeable.
Related
I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.
I learned html and css a week ago. I completed my first project only to find that a div tag I used was not resizing to mobile formats. I have done some research and it seems the answer may reside with JQuery or .JS. I am working within a contained environment, Wordpress.com, and I don't know Java Script yet, but I am familiar with if then statements from studying logic for years.
So I effectively have two problems:
Can I use JQuery with inline html: no css?
How do I do it?
I know I am way off here. I am in the process of going through a .JS tutorial on codeacademy, but I am not finished.
Just thought I would try for advice here. I may not even be in the ballpark!
Here is my div tag and here is what I attempted:
<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>
$(window).resize(function() {
if ($(this).width() < 951) {
$('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);
} else {
$('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);
}
});
Javascript is kind of over-kill for this kind of thing.
I would suggest using CSS media queries.
Paste this in and it should work just fine :)
<style>
#YourDiv{
height:5px;
background-color:#FFFFFF;
}
#media only screen and (min-width:951px){
#YourDiv{width:950px;}
}
#media only screen and (max-width:950px){
#YourDiv{width:450px;}
}
</style>
<div id="YourDiv"></div>
Instead of having your style defined in the div tag, your div now has a unique name (an id) that can be styled separately. This is incredibly useful, and most would argue necessary, once you start building more complicated pages. The #media tags do basically the same thing as your if statements, where min-width:951px will set the style when your window is AT LEAST 951px and max-width:950px sets the style when your window is AT MOST 950px. The rest of the styles that don't change are set above ONE time because they are the same regardless of window size.
And now, just for fun I'll show you how to do it in pure Javascript as well:
http://jsfiddle.net/AfKU9/1/ (test it out by changing the preview window size)
<script>
var myDiv = document.getElementById("myDiv");
window.onresize = function(){
var w = window.innerWidth;
if (w > 600){
myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
}
else{
myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
}
}
</script>
$('.divIWantedToHide').hide() will hide the div !!
In order to apply css to this div you need to use css:
$('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');
If you want to append any div and apply css to it then use append/html
$('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
or
$('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
No, at wordpress.com you won't be able to use inline JavaScript. Not in regular posts using the HTML editor nor using the Custom Design upgrade that only includes a CSS editor.
Maybe you'll benefit from the following:
Preprocessor
WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information. You can select which syntax you would prefer to use at the bottom of the Appearance -> Customize -> CSS panel.
If you want to resize or apply another style to some elements adapted to the device screen size, yout can just use the #media css property.
#your_div_id {
width: 950px;
/* ... */
}
#media (max-width: 38em) {
#your_div_id {
display:none;
}
}
You are trying to hide a div with class '.divIWantedToHide'. But your div does not have any class.
So you should add to your div the class:
<div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;"> </div>
And then, you can show and hide it like here:
$(".divIWantedToHide").hide()
$(".divIWantedToHide").show()
Using the plugin pace.js (http://github.hubspot.com/pace/), I wish only to use it to preload the first page of a site. Been looking through the options but there doesn't seem to be a built-in way to do this, but only toggling pushstate and ajax preloads.
Also, for some reason the preloader bar ends about 50% of its width when preloading a page. This probably has to do with the site being run locally, although I use multiple external elements and images. Anyone else experiencing this?
here is my way of doing it. you may put in how you implemented that.
<script> $(window).load(function(e){ $('div.loading-page').fadeOut('slow'); }); </script>
<div class="loading-page"></div>
css:
.loading-page{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:white;
z-index:1999; /* as pace has 2000 */
}
If for some reason you wanted to do this with pace.js, you can take advantage of classes and just add a class to the body element after the page has been completely loaded.
$(window).load(function() {
setTimeout(function() {
$('body').addClass('loaded');
}, 1000);
});
Then you can just hide pace with CSS if its inside body.loaded
body.loaded .pace {
display: none;
}
Of course, it doesn't really make sense to use pace for this if you only want to show it once, but using this technique you can easily have different styles and/or animations for initial VS. secondary loading
I have a div with an ondragenter event. When the mouse is entering the div, I want the background to change to a specific image, but the image doesn't change until I let the mouse button up.
If I try to change to a background color, it works fine!
I have also tried to change css class with a background-image and it works, but in my case I can't do that because I don't know which image to show from the css.
HTML
<div id="test" ondrop="drop(event)" ondragenter="enter(event)"></div>
JavaScript
function enter(event) {
$('#test').css('background', '#333 url("test.png")');
event.preventDefault();
}
In my code example the div will get the color #333 when the mouse enters and then get the background image when I let the mouse button up.
I'm developing this in spotify which is webkit-based.
Does anyone have a clue how I can solve this problem?
Thank you!
On http://musicmachinery.com/2011/12/02/building-a-spotify-app/, it says:
Developing a Spotify App is just like developing a modern HTML5 app. You have a rich toolkit: CSS, HTML and Javascript. You can use jQuery, you can use the many Javascript libraries. Your app can connect to 3rd party web services like The Echo Nest. The Spotify Apps supports just about everything your Chrome browser supports with some exceptions: no web audio, no video, no geolocation and no Flash (thank god).
That being said, I recommend that you use Jquery. Not only is it easy to learn, but you have have access to JQuery UI (visit http://jqueryui.com/demos/ for demos).
As for your drag-enter/drop problem, I've made you an example using jquery. The demo can be found on HERE or http://jsfiddle.net/H8fPL/12/. I've also provided the code I used below. Let me know if you need anything else! Happy coding!
CSS:
div{
width:200px;
height:220px;
border:1px solid black;
}
#div1{
background-color:orange;
margin-left:20px;
}
.NC{
background:url("http://www.dreadcentral.com/img/news/jun11/niccage.jpg") no-repeat;
}
.surprised{
background:url('http://rlv.zcache.ca/smiley_oh_sticker-p217194901605792400envb3_400.jpg');
background-size:80px 60px;
background-repeat:no-repeat;
background-position:center;
}
JAVASCRIPT:
//needed for jquery,
//CALL THIS SCRIPT BEFORE USING $ syntax
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
//query UI script
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
HTML:
<div id='div1'>
Come Hither...
</div>
<div id="dropme">
DRAG ME OVER AND WATCH ME CHANGE
</div>
IMPORTANT REFERENCES:
http://docs.jquery.com/Main_Page (Obviously)
http://jqueryui.com/demos/ (UI DEMOS)
http://jqueryui.com/demos/droppable/ (METHODS/EVENTS/OPTIONS ESSENTIAL!)
http://jqueryui.com/demos/draggable/#event-drag (METHODS/EVENTS/OPTIONS ESSENTIAL!)
http://oscarotero.com/jquery/ (jquery cheatsheet)
Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.
There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;
These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/
I think this one works too:
CSS
pointer-events: none;
if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.
Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!
If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.