Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
For example, you can create a scrolling function in CSS using
.overflow{
display: flex;
flex-direction: row;
overflow-x: scroll;
background: green;
}
Why would someone use a component such as react-scrollbar
https://www.npmjs.com/package/react-scrollbar
I presume that you have more options styling it when using JSX?
Browser-generated UI components (such as scrollbars, resize-handles and some UI components in HTML forms) can appear "a bit clunky" and are known for being difficult to style consistently across all browsers, platforms and devices.
This has always been the case historically and the situation persists at present.
The intention behind using javascript (or a JS library or framework) to reproduce native browser-generated UI is to enable the production of a UI component look and feel which:
is highly customised to the website / web-app; and
remains consistent across all platforms.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
Improve this question
I am new to web development. I was wondering if I should really write different CSS code for different browsers. If I should, any tips for writing and testing my website in different browsers? Also, which browsers should I write different CSS code for? Thanks!
If you use autoprefixer then it will do all the different browser stuff for you: https://css-tricks.com/autoprefixer/
For testing in different browsers you could use something like BrowserStack
I suggest you write CSS code that targets the largest audience or market. Currently, the most used browser is Google Chrome. If you're more comfortable with another browser such as IE or Safari you can choose to write browser-specific CSS code.
Be sure to check the browser compatibility of the CSS properties you're using on the MDN Web Docs. Cheers!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
If I open a random YouTube video like this ( https://www.youtube.com/watch?v=Jmel5YySUXU ), and inspect the style of a comment in the developer tools, I see that there are two line-height, and the first one is cancelled out.
If I click the "inline:18451", I see the code like below, but I cannot find this in the source code of the web page, so I guess it is somehow dynamically created. My question is that why there are two line-height properties. Is there some meaning to this, or is this simply a bug (that the programmer forgot the first one, and added a second one later)?
#content-text.ytd-comment-renderer {
--yt-endpoint-color: var(--yt-spec-call-to-action);
--yt-endpoint-hover-color: var(--yt-spec-call-to-action);
--yt-endpoint-visited-color: var(--yt-spec-call-to-action);
color: var(--yt-spec-text-primary);
font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing);
line-height: 2rem;
}
This is probably just a typo.
Someone came later on trying to fix a problem, and didn't notice there was already a line-height attribute there.
With CSS in the same selector, the last mention of an attribute overwrites any previous one, unless of course they use !important.
From just experience, people tend to make mistakes.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am working on a Vue.js project that uses Vuetify and vue-flash-message. I am trying to set warning message background to 'blueviolet' by editing its style:
.flash__message.warning {
color: #ffffff;
background-color: blueviolet;
border-color: #ef9e3b;
}
but there is '.warning' class in Vuetify that overrides it, see the screenshot .
I wonder if anyone can explain what technique is used here. And what is the right way to make the message background 'blueviolet' in this situation?
The issue here is your second class which is telling the browser to set the background to yellow as the !important tag on the end of each property. !important tells the browser to override any other styles that overlap classes. You need to:
A) Remove the important from the yellow styles and apply them to the purple
B) Remove the yellow styles all together.
Option A will seem more 'logical' but it depends what environment your working in and how your code etiquette applies to your project. I prefer to keep everything simple and just remove the intrusive css and try and use less !importants in web projects.
For more information on the !important utility visit this helpful blog post: !Important Utility information
Hope this helps.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
For a responsive website is there a best practice to hide/show elements altogether in a media selector? E.g. is it better to have a class called .hide_on_desktop (which sets display: none;) and then to add that class to several elements in the website using HTML.
Or to do the following:
.element1, .element2, #element3{
display: none;
}
In the above case element1, element2 and element3 are selectors (classes and ids) that already exist.
Which approach is best for a big website?
I would suggest creating a hidden class if you plan to hide several objects. Bootstrap handles this by having classes: .hidden-xs, .hidden-sm, .hidden-md,etc.. in order to hide elements based on device width.
http://getbootstrap.com/css/#responsive-utilities
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a CSS file with more than 3000 lines.
In this CSS file there are around 40 elements, which have the property display:inline;
Now my question is; wouldn't be better to create a class like:
.displayInline {
display: inline;
}
and use it inside the mark-up whenever an element needs to have display: inline; rather than writing the display: inline; 40 times for 40 different elements in the CSS file?
Thanks for your help
It is definitely worse. Indeed what are you talking about is the bad practice, that become somewhat popular with so-called CSS frameworks. Representational information (CSS rules) should not appear in structural part (markup) of code. This is an MVC interruption. By the way, MVC pattern isn't the silver bullet, but in this case there is no reason to ignore it.
Here is a good article on that topic: http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
So, answering your question, it may be fine to try out some CSS preprocessors that support mixins. Native CSS doesn't fit well inner hierarchical tasks. Less or Stylus are quite cool.