Do you think it's beneficial to incorporate cutting-edge CSS-properties such as border-radius, text-shadow, box-shadow, and gradient into your layout designs today? And how about utilizing values like rgba()?
As I explore various web galleries, I notice these CSS-properties being utilized frequently. In fact, articles like the one on 24ways.org suggest that there are no issues with using these properties.
We would love to hear your thoughts! What is your opinion on this matter?
I think it's not a great idea to rely on those features at the moment. While you can implement them, they might not be supported in various browsers.
For instance, border-radius, text-shadow, box-shadow, and rgba won't function properly in Internet Explorer. You can check out resources like this source for rgba or the official IE compatibility table for CSS properties.
Considering that Internet Explorer still has a significant user base, it would be unwise to overlook its limitations.
The good news is that you can design a website that looks fantastic with these effects while still appearing acceptable without them. The only potential issue could be with rgba, depending on how it's used.
According to the CSS standard rule, if a user agent is unable to parse a selector (meaning it is not valid CSS 2.1), it must disregard both the selector and any subsequent declaration block, as stated in http://www.w3.org/TR/CSS21/syndata.html
This implies that you can utilize rgba() even if older browsers may ignore it. However, you have the option to provide a fallback value for them by referencing http://css-tricks.com/rgba-browser-support/:
background:#cfdfaf; /*compatible with old browsers*/
background:rgba(200, 54, 54, 0.5);
/*overrides previous declaration on modern browsers*/
Coding Challenge .nav_bar { position: absolute; top: 0; width: 800px; height: 23px; display: inline-block; text-align: center; background-color: #0090bc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 2px solid #004D6F; -web ...
I'm working with a div structure where the outer div has the following CSS properties: position: relative; overflow: hidden; min-heigth: 450px; Inside this outer div, there is another div with the following CSS properties: position: absolute; top: ...
Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I&a ...
I am interested in developing a scrolling table where only 10 rows are visible at any given time, with the middle row set to stand out even during scrolling. The concept is that as the user scrolls down, the highlighted row changes progressively as they c ...
Below is a snippet of my HTML markup: <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Some contents </div> <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" > Some Content </d ...
Whenever I try to print my webpage, I encounter an issue where everything changes on the printout. I would like to be able to print a webpage that looks exactly like what is displayed on the screen. Here is an example of what I am looking for: enter imag ...
Is there a way to stack the green DIVs on top of each other without any space between them in the given simple HTML code? I'm puzzled by the gap between the third and fourth green DIVs. * { margin: 0; } .left { width: 20%; background-color: # ...
Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...
Currently, I am facing a challenge in implementing a scroll down arrow. While this is typically a simple task, it has proven to be a bit more complex this time around. The complexity arises from the fact that my customer desires a homepage with an image of ...
I am looking to dynamically change the CSS of a div using jQuery when it is clicked. The challenge I am facing is that there are multiple divs with the same class and I am unable to modify their classes as they are created dynamically using PHP. <div ...
Lately, I've been facing a dilemma on my website. I have an iframe code that looks like this: <iframe src ="http://hokuco.com/cde/user.txt" id ="myIframe"></iframe> However, the consolas font used in the iframe makes my website appear ...
Currently, I'm in the process of creating an html5 video player and have incorporated javascript to update the current time as a fraction of the total time. The script I've written so far is as follows: function updateTime() { var curTime = ...
I found a solution to make a div semi-transparent using Transify, but I also want to add rounded edges. The issue I'm facing is that the rounded edges only appear after the page has fully loaded when using Transify. Here is the CSS code: .grid { ...
The Bootstrap 5 button extends the default behavior and does not collapse. Here is the code: <nav id="header-nav" class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class= ...
After attempting to import a web HTML CSS template into my self-made MVC, I encountered an issue. While the template works properly on its own, it fails to connect to the CSS files and display proper styles when accessed through my controller. Instead, onl ...
In my Bootstrap (v4.5.3) form, the select options appear differently in Firefox as shown in the image below: https://i.sstatic.net/3suke.png Upon form submission, I have JavaScript code for validation which checks if an option other than "-- Select an Op ...
I am attempting to display a vertical list of radio buttons within a table cell. Is this achievable? Here is the code snippet I am currently working with: <table> <tr> <td> First Name </td> ...
I have the following HTML snippet and I want to target the second child with the class name "embed": <div class="embed-container">test</div> This is what I tried: .feature-row .threecolumns .caption:nth-child(2) { border: 1px solid red; ...
I'm working with a div that displays text fetched from an API call. I'm trying to implement a See more button if the text exceeds 3 lines. Here is my approach: seeMore(){ this.setState({ seeMore: !this.state.seeMo ...
While developing a custom website with Angular, I encountered an issue specifically with Safari on iOS. The website is a single-page app with multiple menu sections that trigger a scroll animation when selected using jQuery. Everything was working smoothly ...