I am working on a project that is using Geb. -- I need to create a selector that hooks into the before element.
backgroundImageStyles(required: false) { $('.element:before')}
and then assess the styling
landingPage.heros[0].backgroundImageStyles.css("background") == '#000000'
this isn't working though - and I will also need to test for the background opacity - like the 0.2 in this gradient
background: linear-gradient(to top right, #000000 0%, rgba(3, 124, 104, 0.2) 100%);
As you are probably aware, Geb is using Selenium WebDriver to select elements in the browser and as far as I'm aware it's not possible to select ::before and ::after pseudo elements using Selenium because they don't really exist in the DOM.
As a side note I'd suggest rethinking your test. I might not have the full picture and understand what exactly you are trying to test and if there is a better way to do it but in general asserting on styles in browser tests is almost never the right thing to do.
Related
is there a way in CSS to get the initial parameter of something, without using javascript, for example:
width: calc(initial-20px);
if so, ho can i retrieve the value of specific parameters, like width.initial?
SCENARIO
It's a visual studio web browser, (it doesn't support css3 by default), i whant an element to look like highlited, but i can only do it through html attributes(i wanna go the easy way). So i could just style="background-color: yellow !important;", but what if background is already yellow? So i decided that calculating the highlight color would fix be awesome ( as i know now it is impossible through css ) background-color: rgb(initial,calc(initial-50),initial) !important; something like that. So this is a scenario. Suggestions are apreciated.
Simply put, no it is not possible to do this with css. You also can't perform calculations like that. You can only do calculations for percentages, like Mooseman said (edit: Mooseman deleted his answer. It mentioned that you can use width: calc(100% - 40px); for example, but you can't use initial like that). for either of those things you would need to use JavaScript.
Edit: Another option for modifying width could be a margin, although that doesn't necessarily do exactly what you want. For highlighting, you could use something like this:
p {
background-color: #FFFF00;
}
p:hover {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
}
<p>Example paragraph with background</p>
This way you overlay a translucent white layer on top of your background-color, making it a bit lighter. That way you can change the background colour without having to know what the original background was.
i think you can Use LESS.
You Can See Here:
http://www.ibm.com/developerworks/opensource/library/wa-less/index.html
What is the difference in efficiency between background-color: #BADA55; and background: #BADA55;? I realize it's quite trivial, but is there a difference in how the browser extracts the values of each. Also, on a slightly related note, on CSS3Please I noticed that for linear-gradients they specified them using background-image. Is there any reason not to simply use background?
The spec makes no mention of how browsers should implement parsing of properties, and in particular, shorthand properties. All there is to it is a grammar, and the grammar says nothing about its implementation. How a browser parses a shorthand declaration then, I suspect, is entirely implementation dependent and not easily answered (unless you have the source code, of course).
In fact, the main reason why we have numerous CSS hacks specifically catered to IE is because of how differently (and often poorly) it understands CSS.
Is there any reason not to simply use background?
The answer lies in your previous sentence:
Also, on a slightly related note, on CSS3Please I noticed that for linear-gradients they specified them using background-image.
Indeed; CSS gradients are considered images for use with backgrounds, and are documented in the Image Values module. The individual background property they apply to is background-image.
If you use the shorthand property to specify either only the color or only a gradient, it will use the initial value for the rest of the values. If this difference in used styles matters, then the difference in performance becomes completely out of the question, because it's no longer a fair comparison.
In this example, the second background shorthand declaration will completely override the first one, leaving you with a solid color and no gradient as the initial value of background-image is none:
background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;
The purpose of the shorthand notation is to specify values for multiple related properties in a single declaration, so in order for both the gradient and the color to apply, it should be rewritten as:
background: radial-gradient(black, transparent) green;
You're second example should be: background: #BADA55;, but either way is fine and should not be something you need to worry about.
If you are curious how browser parse CSS I can tell you: it depends (ever worked with IE?). For Chrome you can see the source on GitHub and the Firefox source can be found here.
I would like to be able to create nice-looking buttons of any color dynamically within a web page, without defining a separate CSS class for each color ahead of time.
Using CSS3 gradients with alpha channels seems like it would be the best way to go about doing this, with low opacity gradients overlayed on top of a solid background color.
However, I don't know enough about CSS to even tell whether or not this is possible, much less actually implement it.
I have found a couple of resources on the web that look like they will help:
CSS3 Gradient Button Guide
Transparency and CSS3 Gradients
Can someone with more CSS experience tell me if this is possible, and perhaps point me towards other resources to make this easier to pull off?
Using something like LESS or SASS, this is fairly easy to do legitimately. Create a mixin like this (robust version):
.auto-gradient(#color) {
/* Use any of the built in functions like saturate() or spin() */
#topcolor: lighten(#color, 20);
#bottomcolor: darken(#color, 20);
background: #color;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#topcolor), to(#bottomcolor));
background: -webkit-linear-gradient(#topcolor, #bottomcolor);
background: -moz-linear-gradient(#topcolor, #bottomcolor);
background: -ms-linear-gradient(#topcolor, #bottomcolor);
background: -o-linear-gradient(#topcolor, #bottomcolor);
background: linear-gradient(#topcolor, #bottomcolor);
/* If using PIE.htc for IE */
-pie-background: linear-gradient(#topcolor, #bottomcolor);
behavior: url(pie.htc);
}
Usage:
.my-button {
.auto-gradient(darkviolet);
}
This will compile to valid CSS(3), it should be something like this:
.my-button {
background:darkviolet;
background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
background:-webkit-linear-gradient(#c43aff,#4c006d);
background:-moz-linear-gradient(#c43aff,#4c006d);
background:-ms-linear-gradient(#c43aff,#4c006d);
background:-o-linear-gradient(#c43aff,#4c006d);
background:linear-gradient(#c43aff,#4c006d);
}
Note: I use lessphp myself, and the version I'm using now seems to choke on named colors like DarkViolet being passed to lighten/darken unless they are lowercase.
MrOBrian's suggestion of the Ultimate CSS Gradient Generator made this a snap. Here is the solution I ended up going with, which is a relatively simple CSS style cobbled together from the aforementioned Gradient Generator and the Cross-Browser CSS Gradient Button Guide.
The following code adds a nice, slick button appearance when applied to an element with a background-color CSS attribute specified. This will allow me to use a common style for all of my buttons, specify their color using the background-color attribute.
JSFiddle Demo
Thank you for all of the advice and suggestions!
I put in a fallback image for some gradients that I have in a login box, but I've realized in both the modern firefox and chrome its skipping the code and going straight to the fallback image.
background:-moz-linear-gradient(19% 75% 90deg,#0177a9, #53c3e8);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#53c3e8), to(#0177a9));
background-color: #0177a9;
background: url(../images/signin.png);
background-repeat: repeat-x;
background-position: -5px -13px;
The fallback image is actually just a screenshot of the login box but it looks identical to how it looks when formed via the CSS3 gradients.
If I take out the fallback image and colour it will load the correct webkit or moz for each browser but as soon as I put the fallback it loads the fallback.
I know it uses the fallback because i set its position at a wrong angle just to see if it was loading and it did. Can anyone help me? It doesnt make sense that its happening.
Thanks!
If its a fallback then you need to have the image BEFORE the garadient definitions, otherwise its just going to override them.
Put the URL before everything else. The ordering might be what's doing it to you.
Usually, the last directive overrules the former ones. Try putting the "background: url" as the first in the file. If this doesn't help, I don't see a pure CSS solution. Use JS (look at the modernizer library to do feature detection).
Does anyone know of an online css optimizer / formatter that can handle css3 gradients?
I've tried using http://www.cleancss.com/ but converts something like this cross browser style :
.example {background:#555555;background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717));
into:
.example {background:0 color-stop(50%,#555555), color-stop(100%,#171717));}
Thanks!
This one says it can handle CSS3 http://devilo.us/. I tried your snippet and it wasn't too smart about the hex, but at least it doesn't hose your code.
http://refresh-sf.com/
Once you set it to "CSS" in the dropdown, this handles cross-browser CSS gradients just fine, including minimising the hex values.
It compressed this (260 characters):
.example {
background:#555555;
background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717));
}
to this (219 characters):
.example{background:#555;background:-moz-linear-gradient(top,#949494 0,#555 50%,#171717 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#949494),color-stop(50%,#555),color-stop(100%,#171717))}
Though not particularly on point here, I would highly recommend trying out SASS which does all sorts of compression (without removing things) and adds a whole crap load of cool things to CSS:
$ sass --watch -t compressed master.scss:master.css
Which will "watch" master.scss for changes and once a change has been made via saving the file, the CSS will be compressed and saved to master.css.
SASS also adds a lot of cool things to CSS like variables, if/else statments, reusable code blocks (e.g. Mixins), and functions like lighten(#000, 10%) and darken(#fff, 30%) which can take a color and lighten/darken it a specific percentage.
Lots of cool stuff, check it out.
You are better off formatting the CSS to be readable yourself, and then using a CSS minifier automatically when moving to production.
You can also use http://tools.w3clubs.com/cssmin/ which is a port of the YUI compressor. In my tests it worked better then all the above mentioned.