CSS Cursor code - apparently wrong syntax - css

I tried to insert the following line of code in an external CSS stylesheet, but my Error Console told me there was an error parsing value for property 'cursor':
cursor: url(JC_puzzle_piece.cur) !important;
Is this not the proper syntax? If so, then what is?

You need to provide a fallback preset value in case the cursor file isn't found. See a list of presets here.
cursor: url(JC_puzzle_piece.cur), default !important;

Related

error while referencing a class in my sass file

so iv'e started learning sass and i'm now in a spot when i added a class to my html (.circle)
and my sass file is already linked to my css file.
when i typed .circle to my sass file and tried to give him a color i incountred in the next error:
This selector doesn't have any properties and will not be rendered.
error styles.sass (Line 6: Properties are only allowed within rules, directives, mixin includes, or other properties.)
my sass file is really simple by now as i try to play with it:
body
background-color: cadetblue
.circle
color: red
as i said when reaching the .circle i get the error. any ideas?
i used the sass --watch command and i use ruby devkit 2.6.5-1
thanks for helping! im new so i try my best
It seems like the syntax is not correct. Try this instead (remark the indentation on color property):
body
background-color: cadetblue
.circle
color: red
More info about Sass syntax : https://sass-lang.com/documentation/syntax#the-indented-syntax

Setting Custom Pointer in CSS

My aim:
To change the default click pointer on a website using CSS.
I have already changed the default pointer but this question is specifically for changing different 'versions' of the cursor.
My current attempt for the pointer is:
cursor: url(images/click.png), pointer;
This worked for the default mouse change (pointer was renamed as auto) but I've yet to find a working solution for the pointer.
Is it plausible or is it simply something not needed and thus, not introduced?
Just set cursor style.
a {
cursor: url("/examples/images/custom.gif"), url("/examples/images/custom.cur"), default;
}
You can read about the css hover property. and add the cursor to it. For example putting the following code in your styles would make the cursor alias whenever you'd hover over the anchor tag. Let me know if this helps you.
a:hover {
cursor: alias
}

Ignore style declaration without value is SCSS

In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.

Why is url() needed in CSS when specifiying background-image property?

Some insights into the decision would be appreciated. I have a hard time finding the reasons why this is specified in the CSS design.
First of all, all URL/URI resources are notated with url(). Second, how do you want to differ between a standard value like none or inherit and images none/inherit?
For example you could create an image called none, send its MIME type correctly and then use
background-image: none;
What should be used now? The stored file? Or the value called none? Another example are cursor files. You could name your cursor file pointer:
cursor: pointer;
To avoid this ambiguity you use url() to denote URIs/URLs. Then it's absolutely clear what to use and you can name the graphics/resources however you want:
background-image: url(none);
cursor: url(pointer);
I suspect they already foresaw the need to have other background images than URL-based ones. linear-gradient for instance.
Also, since image files do not have to have a file name extension, it would be difficult to distinguish the image file from the other properties in the background shorthand method

Problems setting alternatingItemColors from CSS style (Flex)

Hopefully simple question: I'm trying to set the alternatingItemColors on a datagrid via some values that I set in a CSS file but nothing seems to work.
the CSS file looks something like this:
.FACS0 {color: #B0B0B0;}
.SACS0 {color: #A6A6A6;}
.AICS0
{
alternatingItemColors: #B0B0B0, #A6A6A6;
}
I tried a variety of different things. First I tried to load AICS0 directly, i.e.
dataGrid.setStyle("alternatingItemColors", "AICS0");
but this leads to a run time error
TypeError: Error #1034: Type Coercion
failed: cannot convert "AICS0" to
Array.
I then tried
dataGrid.setStyle("alternatingItemColors", ["FACS0", "SACS0"]);
this runs fine but all rows are set to black.
Note: this
dataGrid.setStyle("alternatingItemColors", [0xFF00CC, 0x112200]);
works just fine - unfortunately this won't work for me, i.e. I need to be able to load data from a CSS file.
thank you!
Use the styleName property
dataGrid.styleName = "AICS0"
If you want ALL of your DataGrids to have the same alternating colors, use this in your CSS:
DataGrid
{
alternating-item-colors: #B0B0B0, #A6A6A6;
}

Resources