I get the follow error when trying to use the mixin 'user-select'. I'm using version 0.12.2 which I'm pretty sure supports user-select from compass. So why can't I use this mixin?
Error
Syntax error: Undefined mixin \'user-select\'
Includes
// css3
#import "compass/css3";
#import "partials/deposit";
Call
//File: partials/_deposit.scss
#include user-select(none);
So why can't I use this mixin?
From the #import "compass/css3/", this is the list of the imported things:
Appearance – Specify the CSS3 appearance property.
Background Clip – Specify the background clip for all browsers.
Background Origin – Specify the background origin for all browsers.
Background Size – Specify the background size for all browsers.
Border Radius – Specify the border radius for all browsers.
Box – This module provides mixins that pertain to the CSS3 Flexible Box.
Box Shadow – Specify the box shadow for all browsers.
Box Sizing – Specify the box sizing for all browsers.
Columns – Specify a columnar layout for all browsers.
Filter – Specify the (image) filter for all browsers.
Font Face – Specify a downloadable font face for all browsers.
Hyphenation – Mixin for breaking space and injecting hypens into overflowing text
Images – Specify linear gradients and radial gradients for many browsers.
Inline Block – Declare an element inline block for all browsers.
Opacity – Specify the opacity for all browsers.
CSS Regions – Specify CSS Regions for supported browsers.
Text Shadow – Specify the text shadow for all browsers.
Transform – Specify transformations for many browsers.
Transition – Specify a style transition for all browsers.
From this, we can say that Compass User Interface (css3/user-interface) isn't bundled with compass/css3 thus you need to call it also, after the css3 call:
#import "compass/css3"
#import "compass/css3/user-interface"
//other imports
Update
Compass 0.13.alpha.10 onwards
Looks like the 0.13.alpha.10 Compass imports user-interface as well since the documentation page was updated:
User Interface – Declare an element inline block for all browsers.
Also was added animation as well:
Animation – Specify the CSS3 animation property and all its sub-properties.
Therefore just #import "compass/css3" is enough now.
Related
I have two texts with, according to the "Computed" CSS properties, the same CSS properties. One antialiases in greyscale, the other in color. On the left we have Vuetify v3, on the right Quasar v2. Vuetify renders the text a bit nicer (although opions could vary..). Both are rendered in Chrome 109. I've tried to add -moz-osx-font-smoothing: grayscale;, but I believe that this is an outdated property, and Chrome seems to ignore it alltogether.
Quasar did not have the text-rendering property, so I added text-rendering: optimizelegibility !important; here myself. This however, did not seem to change the output.
The only thing I could not control for is the font itself. Both Vuetify and Quasar come with Roboto prepackaged.
Computed CSS properties:
What is going on here, why are these text rendered differently? and how can we force the anti-aliasing to not "invent" these extra colors?
I am currently building a web application that use SVG to display cameras.
Within the SVG, the base camera draw is defined in a defs tag, and real objects are then drawn using a use tag.
Since those cameras can have different characteristics (e.g. online/active/selected/…), I'd like to style them. However, use tag creates a closed shadow DOM, and therefore are inaccessible for standard CSS rule. I already use CSS variables successfully, but they present some limits.
I recently discovered the ::part selector which is exactly what I need: the object in defs exports some tags using a part attribute, and they are now accessible to CSS through ::part selector. Nice!
Except that only Firefox seems to support it for SVG. Chrome does not. Here is a test: https://codepen.io/glandos/pen/LYOPerb The result should output a green camera with a red and black outlined path. In Chrom(e|ium), attributes from defs are used, but not the CSS.
Two questions:
I couldn't find any reported issue. Did I missed something? And since I don't have (and don't want) a Google account, I can't even report that to the Chromium team :'(
Is there a workaround, apart from going on with CSS variables that cascade through shadow DOM?
I'm using a CSS theme that I'm not allowed to edit, I need a way to paint all the white backgroud-color with something less shiny.
I'm new to CSS, what should I do to override the background-color for all classes using CSS?
Here is a screen shot, I'm using Primefaces to generate the web content hence I'm unable to change the provided CSS
A screen shot of what I'm trying to change
I already understand that every element has it's own class in the theme, but I don't know their names, nor which one of these classes provide the background-color for those elements, what I'm looking for is a simple way to repaint the white color in the whole page.
From the official documentation:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
And also:
Specificity is based on the matching rules which are composed of CSS selectors of different sorts.
That means that the CSS would be applied depending of your browser and your CSS Selectors for that browser.
And you should also look at what CSS Selectors has a higher specificity.
But as you want to override the background-color, that means to get the higher CSS Selector specificity I think what you are looking for is the !important exception.
Again from the documentation:
this declaration overrides any other declarations.
that means that the property of CSS that you are going to set with !important exception will be applied overriding the rest of different configurations that has that property.
But also, you have to care about to abuse of that property:
Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
What I recommend:
Try to set your background-color with CSS Selectors with higher specificity.
If you cannot modify the property, and you have tried all the posibilities, then use !important exception.
You can paste this into the bottom of your page right before the tag.
<script>
document.body.style.backgroundColor = "#883377";
</script>
You can the change the #883377 to whatever color you would like.
Twitter Bootstrap version 2.2.0 specifies the following CSS rules for .btn
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
Why does it disable the filter, right after it has been applied? If I look at the Bootstrap homepage in IE7 and IE9 I can see that the buttons don't have gradients on them. Why did they bother defining a gradient at all?
Bootstrap now uses Less instead of plain CSS. My guess would be that they are using a mixin to generate cross-browser gradients, hence the first line.
The proprietary filter doesn't play well with border-radius (only an issue in IE9+ which supports both), so they disable the filter in those browsers, hence the over-ride in the second line.
I'm making a website with HTML5 and CSS3 features. I've got two custom fonts which are added through #font-face. They're used in logo. They're in 'h1' tags, and I rotated them with CSS3 proporety:
transform: rotate(350deg);
Of course for every browser I used proper prefix (for IE: "-ms-", for FF: "-moz-", for Chrome/Safari: "-webkit-" and for Opera: "-o-"). The problem is that it doesn't rotate in Chrome and Safari. So my question is, does Webkit engine allow to rotate custom fonts with CSS3 properties?
Most inline content doesn't support transforms in webkit browsers - this is a known limitation. Although H1 is a block level tag, my guess is that you're using a span tag (inline) inside the H1 tag around your actual text to add the font, and this is giving you problems.
Add "display: inline-block" and see if that helps.