Vue 3 now allows for disabling the automatic renaming of CSS properties like "top/bottom/left/right" to "inset"

I noticed that Vue (or maybe Vite) automatically changes my css style attributes from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;"

However, this adaptation doesn't work well for older browsers that do not support the inset property, causing a bug in the design.

To resolve this issue, I attempted to define the styles explicitly like so:

:style="'top: 0; right: 0;' + 'left: 0; bottom: 0;'"

Unfortunately, it still gets converted to inset despite my efforts.

Additionally, I have specified the following configuration in my vite.config.ts file:

build: {
    target: 'es2015'
  }

My expectation was to maintain the styles exactly as I input them without any automatic conversions.

cssvue.jsvuejs3vite

Answer №1

Where can you locate the conversion?

Have you thoroughly examined your file build to determine if there is an inset instead of bottom, top, left, or other relevant property?

In some cases, the conversion may not be due to the project or build itself, but rather to the browser's own behavior. You can refer to this link for more information.

If this is the scenario, it is not necessarily a problem, as the browser may simply be supporting the change.

Answer №2

If you're looking to enhance your code with logical properties, consider utilizing a polyfill specific for PostCSS like postcss-logical. This tool allows you to maintain logical property authoring while rectifying browser support issues. Once full support is achieved, the need for the polyfill will diminish.

Are you aware of whether your project utilizes Lightning or PostCSS?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: For example, the string "https://www.linkedi/Testing" is only dis ...

htmlcssangularfrontendkendo-grid

Div flexes and compresses smaller than its content dimensions

Here's a link to the fiddle: check it out Take a look at a normal card below: But when the browser window is resized, it shrinks to this: This is the HTML structure: #product-list { overflow-y : scroll !important; height: 100%; } <lin ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Altering the ASP DropDownList's background color solely with CSS modifications

Is there a way to change the background colors of dropdownlists in my C# web app using CSS instead of specifying each one individually? In simpler terms, I'm trying to avoid having to write out code like this for multiple dropdowns: private void For ...

c#cssasp.netdropdownbox

Font animation experiencing limited functionality

As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...

htmlcsscss-animations

Oops! The internal server is throwing an error because it can't find the preprocessor dependency "sass." Have you made sure to install it

After setting up a new VUE 3 and typescript application with vite, I decided to add primevue and primeflex. However, when running npm run dev, an error message appeared as shown below: https://i.sstatic.net/YPmv6.png Can someone guide me on how to resolv ...

npmvite

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

My website needs a responsive rectangle where I can easily adjust the height and width. However, when I try to rotate the rectangle, the content also rotates 90 degrees. Can anyone help me with this issue? Thank you in advance for any assistance. Snippet ...

htmlcss

The Vue and Element popover feature is unable to modify the current page

After hiding the popover and reopening it, it seems that the value of currentPage remains unchanged. Below is the HTML CODE: <el-popover placement="bottom" trigger="click" title="网段详情" @hide="popoverHide"> <el-table :data="in ...

javascriptvue.jspaginationelement

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

I am attempting to override the CSS of Muidrawer-paper. It works locally after running "npm start", but it does not take effect when building the package. .css-12i7wg6-MuiPaper-root-MuiDrawer-paper { position: absolute !important; top: 50px !import ...

cssreactjsmaterial-ui

Angular Material Rotate Ink Bar to Vertical Orientation

After wanting to change the orientation of Angular Material's Tab Component to vertical, I visited this page (Tabs) and experimented with the CSS. By making the necessary adjustments, I successfully displayed the tabs vertically using the following CS ...

cssangularangular-materialmaterial-design

utilize vuejs to display an alternative route on a side panel

As I develop a back office using Quasar, I am exploring the possibility of creating what I would call a sidepage to open routes. This sidepage would display the requested component without any additional decoration, such as menus. However, there is also a ...

vue.jsvue-routerquasar-framework

Struggling to break free from the confines of an overflow-hidden container in swiperjs due to

I have a slider that utilizes swiperjs and I want to incorporate a dropdown menu within each swiper-slide. However, I've encountered an issue where the dropdown menu is unable to escape the root container due to the positioning constraints. For a dem ...

cssescapingoverflowhiddenswiper.js

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

javascriptjqueryhtmlcssajax

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

javascriptjqueryhtmlcsscolors

The Vue.js class bound to the object remains static even after the object is updated

When I have a number of buttons, generated using the v-for directive, with each button having an initial class based on a string from an object. There is an event that changes this string when a button is clicked. However, the class does not get updated a ...

javascriptvue.js

Conceal specific image(s) on mobile devices

Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve t ...

csshtml

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

javascripthtmlcssangulartypescript

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

javascriptcsstypescriptvue.js

How can Components access variables declared in a custom Vue.js plugin?

I had developed a unique Vue js plugin to manage global variables as shown below: CustomConstants.js file: import Vue from 'vue' export default { install(Vue){ Vue.CustomConstants = { APP_VERSION: '2.1.0' ...

javascriptvue.js

Leveraging webpack alongside url-loader for embedding images within React applications

When styling with an inline style and passing in the URL of an image file, I typically do it as shown below: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px' ...

cssreactjswebpackwebpack-file-loader

The jQuery toggle function is malfunctioning when applied to the rows of a table

I have been experimenting with toggling table rows using jquery. Initially, the state is hidden This feature is functioning properly $('.table tr.items.' + name).each(function() { $(this).show(); }); Furthermore, this snippet of code is wor ...

javascriptjquerycss