I wanted to know how we can add multiple modifier, for example adding background, padding and more to an android jetpack composable?
It's really simple;
You can chain multiple modifiers.
Column(modifier = Modifier.preferredHeight(500.dp).padding(100.dp)) {
Text("Hello") }
And The order is important; Modifier elements to the left are applied before modifier elements to the right.
Related
I created a page with a resizable panel on the bottom using react-resize-panel lib.
I had to change the alignment of the elements inside the divs generated by the <ResizePanel> component provided by the lib.
<ResizePanel> creates three levels of elements:
I needed to override the margin-bottom property of the child with the class name ResizePanel-module_ResizeBarVertical__2LUZV. Likely, the suffix is generated dynamically, so I had to use the CSS selector to override it:
[class^='ResizePanel-module_ResizeBarVertical'] {
margin-bottom: 0;
}
Tested it locally and it worked as expected. But when I deployed to remote the sequence of the CSS rules applied changed and my custom style was overridden:
I would like to get a better understanding of how CSS is loaded locally and remotely. In particular, is there any rule of thumb for local testing when it comes to React styles and conflicting CSS rules
UPDATE with solution
There are two solutions suitable:
narrow down the selector to div only (selected this one based on best practices)
div[class^='ResizePanel-module_ResizeBarVertical'] {
margin-bottom: 0;
}
use !important in the style
[class^='ResizePanel-module_ResizeBarVertical'] {
margin-bottom: 0 !important;
}
CSS Precedence could be tricky sometimes, there should be 3 "levels", sorted by highest priority:
!important (you can force override; should solve your problem, but probably doesn't fully answer your question)
specification of selector (how much specified the selector is; seems like what you are struggling with – your custom selector is less specified, so it has lower weight)
order; what was declarated first (there could also be problem with cache; but that's probably not your case)
More info about the selector specificity weight in the Mozilla docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I recently set up Stylelint to run through my stylesheets but there's an error it's throwing that I'd rather keep as-is:
The error is that I'm not using a single space before the { and while I'd like this to be true for most other instances for legibility I was hoping to keep this one.
Is it possible to either modify the rule to allow these sorts of indentation patterns or otherwise disable a rule for a block of CSS? The latter is not ideal but I'll take what I can get.
Otherwise I'll likely just ignore it.
I think the rule in question is block-opening-brace-space-before.
If you want to only enforce a single space before the opening brace of multiline blocks and ignore single-line blocks, then you can do so using the rule's always-multi-line primary option:
/* Enforce a single space before this opening brace */
a {
color: red;
}
/* Don't enforce anything before this opening brace */
a { color: red; }
There is, however, no option to specifically ignore the opening braces of single-line keyframe declaration blocks. If this is what you want then please raise a feature request issue.
Is it possible to either modify the rule to allow these sorts of indentation patterns
You can create a plugin that enforces the alignment of the open braces of single-line keyframe declaration blocks within each #keyframe.
otherwise disable a rule for a block of CSS?
You can use stylelint-disable commands to turn off the block-opening-brace-space-before rule for this block of code.
Here is my original CSS to apply different colour backgrounds:
.one-colour {
background-color:#153a63;
}
.two-colour {
background-color:#f16c24;
}
.three-colour {
background-color:#337db9;
}
I know you can do multiple CSS classes such as .one.two.three {...}
But is my CSS condensed down as much as possible? and I don't mean just putting the code onto one line to make it "shorter".
But is my CSS condensed down as much as possible?
Yes(ish)
Each CSS rule is setting the same property style to a different value. As such, you have condensed the ruleset to the minimum number of rules to allow this level of distinction. If anything, you could simply change background-color to just background- if background properties aren't set in other rules which this could override.
*Although my predisposition is that this should be a comment, I guess in essence it is effectively an answer to your question.
Additional Methods Update:
As mentioned in the comments, there are some other (overkill?) methods for condensing:
Put everything in a single line, remove whitespace (minify)
Shorten your class names, e.g (.one-colour -> .c1), as noted below this is a subjective, context sensitive decision
The last style setting in a CSS rule does not require a trailing semi-colon in order for the rule to process, so you can also remove these
Convert your HEX colors to their 3 digit counterparts (approx), #036, #F63 and #36C
Depending on how you use these classes, there might be a way to remove one of those classes.
If you use those classes in a particular container - you could apply one of the colors to the container and then override it only on 2 of the inner divs.
Again, it depends on how you use the classes.
Yes, I would say so. If you wanted to start doing things to all the classes at once (like add a black border to them all) then you could combine that onto one line, as you suggested. Otherwise, it looks as compact as it's going to get at the moment. I can't suggest an improvement.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Custom Cursor Image CSS
Is there a way to change the default cursor images for your website when you use, for example..
body{
cursor:hand; /* Changing what 'hand' is equal to*/
}
So then I wouldn't have to use cursor:url() on everything and instead just change what the names equal to.
So for example I'd like to be able to..
hand = URL;
progress = URL;
etc etc.
You can't change the cursorset of the Operating-system. (Just imagine - What would you say as a visitor of such a website changing your system-settings). You also cannot redefine the appearance of the keywords.
You have to define custom-images if you want to do so. The best thing you could do is group elements you want to have the same cursor.
input, select, [elements,]*{
cursor: url('someInputCursor.cur');
}
body{
cursor: url('mycursor.cur');
}
however, cross browser functionality is limited.
you should test...
You can't change cursor: hand; to use a different image. You could use a CSS pre-processor (e.g. LESS or SASS) to ease the task, e.g.
$hand: url('something.cur');
body {
cursor: $hand;
}
Or perhaps use a class (or a selector that covers all necessary elements) and edit the HTML accordingly?
.customcursor {
cursor: url('something.cur');
}
No, you cannot, because the cursor property value keywords have their meanings defined in informal prose in CSS specs, with no tools for giving any instructions on how to implement them. The obvious intent is to leave the exact shapes implementation-dependent.
Using tools like LESS, you can write style sheet code that uses defined variables, but such code needs to be translated into CSS then.
Note that the hand keyword in non-conforming. The corresponding standard keyword is pointer. (People have used hand because IE 5 did not recognize pointer.)
I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.
.hidden
{
display:none;
}
.newsItemList li.selected
{
background-color: yellow;
}
I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.
Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.
I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.
That being said, I find myself using the following on a constant basis:
.accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
.clear - tied to Easy Clearing
.first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
.replace - tied to Phark IR for transparent image replacement
Finally, I dynamically assign .js to the <html> element with
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>
This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.
Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.
I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.
In regards to your question about CSS frameworks...
Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.
After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.
There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.
Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.
CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.
You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:
element.onclick(function(e){ this.style.backgroundColor = 'yellow' }
That's bad because you really ought to be using:
element.onclick(function(e){ this.className = 'highlight' }
The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:
element.onclick(function(e){ this.display = 'hidden}
I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.
I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:
*
{
margin: 0;
padding: 0;
}
I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.