Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am working on a personal project using Ruby on Rails v.6.0.2.2. I was coding a CSS Responsive menu this morning I had all sorts of problems. The mobile menu button was not working. It is a HTML/CSS only menu I have used in the past, which works fine Responsive, Pure CSS Off-Canvas Hamburger Menu.
What I have determined is that Rails/ERB does not seem to support the :target pseudo class. Is there documentation somewhere which specifies the supported CSS classes?
In principle, CSS support has nothing to do with Rails. CSS is purely negotiated between your css/html code and the web client. But some Rails components can get between the two, for better of worse.
In this case Turbolinks is probably preventing your :target pseudo-class from working. Try adding data-turbolinks="false" to your links:
<a data-turbolinks="false" href="#p1">Jump to the first paragraph!</a>
Or if you are using a link_to helper:
link_to "Jump there", your_url(anchor: 'p1'), data: { turbolinks: false }
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 3 years ago.
Improve this question
There are so many ways to use style inside react js that it confuses me.
for example :
Normal CSS
CSS in JS
Styled Components
Sass & SCSS
Are the above methods influencing website load speed?
What is the difference between these methods?
Try using SCSS when ever you can. It helps to organize your stylings and will be processed to css any way. So there is literally no mentionable downside.
For simple styling i would recommend normal css classes (in .scss files).
For complex animation or styling logic use javascript in conjuction with existing animation libraries like framer-motion. That way you have more control over what is happening and also more possibilities to make your site outstanding and unique.
Performance is all the same, all of them are translated into plain CSS when you run : npm run build.
CSS has its benefits, because of designer-friendly but you may get some problems by accidentally making 2 classes with the same name(this is when you have CSS split into many files) if this happens it will make debugging a nightmare (been there myself).
Sass has the same problem as css, but it's a way more cooler css :)
Styled-component, CSS in js, may fit a little better on react component-based world, because for every "class" that you style a UNIQE className is generated + it gives you more power by having props/state modifying the styles of classes, not like others where for a backgroundColor change you will need 2 classes.
There are a lot of ways to do this, best-comparing article that it served me well in my beginning is in here: https://www.sitepoint.com/react-components-styling-options/
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
The inverse question has been asked multiple times. However I could neither find any cons nor convincing proof of their complete absence.
I am all for progress and semantic documents. In fact I have started to use new semantic tags in my markups already a while ago (it feels nice!). Still I wonder if there are any (possibly obscure) caveats one should know about.
Will the rendering break (more) on that office machine which rolls prehistoric versions of IE?
backwards compatibility of css selectors like article?
strange side effects to the DOM?
...(anything)?
Some older browsers don't recognize the html5 elements. At best this means you have to define default style rules for those elements in your CSS.
In some cases you might need to apply a shim, or in this case, a shiv:
https://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/
Again, old browsers (I'm looking at you, IE) won't even recognize them as elements, so yes, it would likely change the structure of your DOM. Also, I've seen old browsers just output the html5 tags as plain text, so you see the <article> tag right there in your content.
If you happen to be in a situation where you can't support the new html5 elements, one handy workaround is to use divs and give them classes that match the desired element names. So for example you'd use:
<div class="article">
instead of
<article>
This approach has the benefit of sticking to the new "mental model", you can still think of your content in terms of articles and asides or whatnot. This approach also has the benefit of making it relatively straightforward to upgrade your code to full html5 spec at some point in the future, as all you have to do is search for the classes and replace the divs as appropriate.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am currently making a website and having trouble with font sizes. You can see a demo of what I've done at www.dweeman.com. It is happening with the phone number font size at the top right and the copyright information in the bottom left. The CSS for them both is as follows:
p.copyright {size: 0.2em;}
p.phone {size: 0.75em;}
However it seems like something else in my CSS is overriding their.
I am using third party code for my navigation. I can't see anything in the CSS that would be doing this and was looking for another eye.
You can see all this on my test website I mentioned above, but if needed I can post my stylesheet here (it is quite long).
Thanks
Quite a few issues with your site. And I really suggest reading up on how CSS selectors work. But in answer to your question.
You've set phone and copyright to have IDs. eg:
<p id="phone">
But in your CSS you've applied styles to the CLASS phone.
Change your respective P tags to:
<p class="phone"> Foo </p>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I created a solution, stuck in jquery ui to do some slider bars which work and look great.
I popped an accordion onto a page and the CSS for it is awful. But I have no idea how to replace it with my own CSS, as it seems to use an absolute TON of CSS classes and overriding them all seems very messy.
Presumably picking and choosing styles and themes with JQuery UI is a common task, is there a best practice for this?
I'm thinking perhaps you can get the individual component CSS and pre-compile it or similar. But there seem to be many common CSS styles that are applied by jquery ui.
For example, an accordion has these classes automatically applied:
ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active
I can see that two contain the word 'accordion' and so you can imagine 'overriding' (or should that be removing the code from the jqueryui css and putting it into my own css class?) them without issue, but the others are buried in jquery ui and overriding them globally would likely cause issues.
My goal is to completely customise the accordion control with my own CSS while not affecting any other jquery ui component.
You need to re-declare the same in your stylesheet at the end of all the other styles and set to your custom values that you want to override. After doing that, re-declare that css file at the end of the page. Hope this helps.
If you want to keep the original style as it is then wrap one div around your accordion and inherit the css as you want. Anytime you can remove that class from div to get the default jquery accordion. like:
<div class='someClass'>
<div class='ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active'></div>
</div>
CSS would be like this:
.someClass .ui-accordion-content { /* your necessary styles */ }
Both above answers seem to fit your needs, in the interest of completeness though you could also over-ride the css using jQuery simply picking out the elements that you're not happy with, e.g.
$(".ui-accordion-content").css("color", "#FFF");
Might be simpler than digging it out in the jquery-ui css or re-declaring if you're only looking to change one or two items.