Equivalent for '-Moz-Element' in Other Browsers

CSS -moz-available equivalent in Webkit?

Once it's implemented (or ready), you can use

please-use-available-width

but for now use

-webkit-please-use-available-width

PS.
This is a joke

There is no webkit solution for this -quite important- problem.
The importance lies in the fact that a floating content DIV with little content will be resized to the width of this content. This breaks the page.

A floating content DIV is used to put the content before the menu, an accessibility pragma.
We can only hope that this value is incorporated in the next CSS spec.

Keep your fingers crossed :-)

Is there a css cross-browser value for width: -moz-fit-content;?

At last I fixed it simply using:

display: table;

webkit-baseline-middle and -moz-middle-with-baseline

@VSG24:

Are they part of any standards?

Both properties are not part of any standards, according to W3C CSS reference. They only seem to be used by Webkit and Gecko to behave correctly, as expected in CSS 2.1 specification:

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

CSS 2.1 specs, p170

Diagram showing the effect of various values of 'vertical-align' on table cells

@VSG24:
What is the expected behavior when using them?

After some search on the web, here's what I've found about -webkit-baseline-middle on the Safari CSS Reference:

vertical-align: -webkit-baseline-middle:

The center of the element is aligned with the baseline of the text.

I was unable to get any info about -moz-middle-with-baseline other than this one :

Q: Webkit-baseline-middle - are there alternatives?
A: the same, only for Mozilla
>vertical-align: -moz-middle-with-baseline;
https://toster.ru/q/255210

Below is a test, you may try it using Webkit based browsers (such as Chrome) and Gecko (Firefox):

div {
  width: 15%;
  height: 100px;
  display: inline-block;
  box-sizing: border-box;
}

hr {
  width: 100%;
  position: absolute;
  top: 90px;
  height: 1px;
  background: hotpink;
  border: none;
}

.container {
  border: 2px solid hotpink;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  z-index: -1;
}

.reference {
  background: darkblue;
}

.standard {
  background: teal;
  vertical-align: middle;
}

.moz {
  background: antiquewhite;
  vertical-align: -moz-middle-with-baseline;
}

.webkit {
  background: darksalmon;
  vertical-align: -webkit-baseline-middle
}

<div class="container">
  <hr />
  <div class="reference"></div>
  <div class="standard"></div>
  <div class="moz"></div>
  <div class="webkit"></div>
</div>

How can I zoom an HTML element in Firefox and Opera?

Try this code, this’ll work:

-moz-transform: scale(2);

You can refer to this.

How to use -webkit-fill-available on Edge and IE11?

As a workaround, you can try to set the min-width: 100% for the control class.

The min-width: 100% declared at the start will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available.

<!doctype html><html><head><style>.container {  max-width: 200px;  background-color: grey;}
.control {     min-width: 100%;     min-width: -moz-available;               min-width: -webkit-fill-available;       min-width: fill-available;}</style></head><body><div class='container'>  <select class='control' name="cars" id="cars">    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>    <option value="mercedes">Mercedes</option>    <option value="audi">Audi</option>  </select></div></body></html>

Firefox equivalent of moz-media-controls

There might not be a Firefox equivalent. This article discusses how to hide the fullscreen video controls in Webkit-based browsers, but fails to find a moz- prefixed equivalent:

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

But, as it mentions, another thing you can do is fullscreen an outer element that contains the video element, rather than fullscreening the video element itself. Then you can control what the user sees. But I think this works best with video elements that don't have their own controls enabled, since the standard video controls include a fullscreen button that won't do what you want.

To fullscreen any element, use the requestFullscreen method. It works on all the current major browsers, although some of them may still require using a prefixed name (i.e. mozRequestFullscreen).

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

webkit-appearance: none; not working for button

You should try this code instead :

input.wpcf7-form-control.wpcf7-submit {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

Consider adding !important if it still not working.