Starting a new project to create a fresh website.
It seems like many people are leaning towards CSS3 and AJAX, neglecting browsers without JavaScript support. They resort to workarounds like enabling CSS3 through JavaScript in older browsers.
Is this the recommended approach today?
My recommendation is to embrace the concept of "progressive enhancement":
Progressive Enhancement involves building each layer (content, followed by markup, styles, and behavior) on top of the next, ensuring that the essential content remains accessible for less capable browsers and devices. It's not about specific technologies like JavaScript, CSS3 Animations, or icon fonts. At its core, Progressive Enhancement is about starting with the content when designing a webpage.
Begin with simplicity, and incorporate Unobtrusive JavaScript and Css3 in a way that allows users to navigate and use the website even if these features are not supported.
The necessity of handling older browsers, such as IE versions below 9, and implementing advanced features not supported by them will determine the approach you need to take. If accommodating these older browsers is a requirement and complex functionalities are necessary, utilizing libraries that simulate these new features may be the solution. On the other hand, if there is no need to cater to older browsers or implement intricate features, then there may not be an issue at all. For a quick overview of browser support for specific features, you can refer to .
When it comes to cross-browser development, the consideration of JS and CSS3 support, fallback options, workarounds, and degradation all boil down to a matter of time and money. Sometimes, accommodating older or less common browsers can consume a significant portion of your development timeline. As we all know, time equals money. So, is it worth investing this much time in catering to browsers that may not even make up a substantial portion of your website's visitors (i.e., potential customers)?
For instance, currently, even IE8 only holds 4.31% market share. And don't forget, it does support JS.
I'm in search of a super lightweight solution that can effectively load an external HTML file into a page using only vanilla JavaScript. The external file contains HTML, CSS, and JS. Essentially, I want to create a concise JS snippet that loads a butt ...
I am currently using localStorage to store a string input by the user as a title, which will be saved for future visits. I would like to implement a button that allows the user to delete the displayed text (from localstorage) and enables the input field fo ...
Within an ASP.NET C# website, I have incorporated an input that allows the user to upload a file to the server. To address the limitation of not being able to style an input of type=file, I devised a visually styled div that mirrors the appearance of the i ...
After my php/html script generates the image, I am looking to display it without needing to reload the page. I currently call a javascript function within the PHP code to change the image. However, I am unsure how to pass the new image name to this javasc ...
Having a set of checkboxes, some already checked and some to be updated by the user. The issue here is that while the checkboxes render correctly initially, they do not change upon clicking. The 'checked' value does get updated when onChange is t ...
I have a flexbox setup with a left and right section, each of equal width. The left side displays an image and the right side contains text. While this layout works fine in Google Chrome, it does not wrap properly in Internet Explorer 11 when the width is ...
I have a TableCell component in Material-UI that displays dates in the format 2019-03-25T19:09:21Z: <TableCell align="left">{item.created_at}</TableCell> I want to change this to a more user-friendly format showing only the date as either 25/ ...
Struggling with a particular issue. Two functions have been created as shown below: function limit_char_normal(textid, limit, infodiv){ var text = $('#'+textid).val(); var textlength = text.length; if (textlength > limit) { ...
I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...
When using Material-UI's <Table/> with ReactJS, a table is set up with a select all checkbox. Each time an individual row checkbox is clicked, the row id is added to the state array clickedRowIds. This allows for logging of the ids of the clicke ...
Currently, I am developing express middleware to conduct two asynchronous calls to the database in order to verify whether a username or email is already being used. The functions return promises without a catch block as I aim to keep the database logic se ...
I am currently working on a checkbox filter function that saves the value of clicked checkboxes in an array. However, I am encountering issues with updating the computed data as it is always returning undefined. The structure of the data: Casino { brand_ ...
I am currently utilizing the following snippet of Javascript to extract information from the current webpage using a browser extension. I have only included a portion of the code that is relevant, as the full script is quite lengthy. The code works perfect ...
Looking for a CSS trick to create a video background that spans the full width of the browser and auto resizes with the browser size. It's essential that it plays on Safari, so please specify the supported video file types. ...
Apologies if this is not the appropriate platform for my query. Just to provide context, I am a designer with minimal experience in APIs and Javascript. I am currently utilizing the randomUser API to create a JSON file or URL that can be integrated into I ...
Having trouble implementing Discord login on my website. When trying to exchange the code for an access token from https://discord.com/api/oauth2/token, I keep getting the error { error: 'unsupported_grant_type' }. This is my code: const ...
I'm attempting to achieve a specific goal using Vue, but I'm uncertain if it's feasible given my current struggles in obtaining the desired outcome: An API endpoint returns an array containing multiple objects. While I am able to successfu ...
I currently have a dataset in the following structure: itemlist : { "dates": [ "2019-03-15", "2019-04-01", "2019-05-15" ], "id": [ "arn21", "3sa4a", "wqa99" ], "price": [ 22, 10, 31 ] } My goal is t ...
My React component is fetching data from Firestore and storing it in the items array. However, I am encountering an issue where the menus variable contains three empty arrays that are being rendered on the page. Initially, I used an async function to fetc ...
Apologies for the extensive uploads, I'm not sure how else to proceed. I'm attempting to rearrange my grid layout at a specific width so that the paragraphs repeat with the images. However, I'm encountering a random space between 1 and 2 whe ...