We Keep Coding

Target the width of the window fixed max-width="360px" [duplicate]

This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Closed 5 years ago.
I work on a web page and I want when I narrowed the page (by the square button to the right of the page close to closing page cross), the reduced page is reduced by a width-max = 360px, ie its minimum length = 360px; how I have to program this is what you had an example of solving this problem is thank you very much.

Use media queries for responsive designing. In your case you should write your styles inside a media query for max-width of 360px. Like:
#media only screen and (max-width: 360px) {
.my-selector {
/* styles */
}
}
Learn more about Media Queries.
Hope this helps!

How to target Firefox browser specifically? [duplicate]

This question already has answers here:
Targeting only Firefox with CSS
(13 answers)
Closed 6 years ago.
I have a font that renders certain characters incorrectly on Firefox. I want to change the font to something else if Firefox is detected. I tried this technique:
body:not(:-moz-handler-blocked) .altFont {
font-family: helvetica, arial, sans-serifs !important;
}
It didn't work and also on the Firefox site it says it's not recommended. I was wondering if there is any other way to check?

Use the following syntax to target any version of Firefox Browser:
#-moz-document url-prefix() {
/* Styles to be executed on firefox */
body .altFont {
font-family: helvetica, arial, sans-serifs !important;
}
}
Reference: CSS hacks targeting firefox

How to add CSS Hack specifically for IE10?

I am trying to add css only for iE 10.
Actually my css is working fine in chrome and firefox. But is creating some problem in IE 10.
I tried this code and made ie10.css but it is not working.
<script>
if (/*#cc_on!#*/false) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="css/ie10.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
</script>
It is not working. Kindly help.

You can easily track the latest versions of IE (mostly IE 10 and IE 11) using
1. CSS media query hack:
/*
#ie10,11 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//-- Put your IE specific css class here
}
OR
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
Read this
Working Example
2. Browser Detection:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
3. Using script (NOT Tested):
<script>
/*#cc_on
#if (#_jscript_version == 10)
document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
#end
#*/
</script >
Note : I know document.write is considered bad practice.
Conditional comments (ie10 dropped conditional comments):
if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.
microsoft drop conditional comments in ie10.

Here is the another tricks which I used in my project, you can replace h1 with your class or own CSS
IE10 Only
http://css-tricks.com/ie-10-specific-styles/
Use this JavaScript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
Click here for all earlier version for IE

Rotate a text 90 degree in IE8 doesnt work [duplicate]

This question already has answers here:
Rotating 90 degrees in CSS in IE8 and lower
(2 answers)
Rotating a text to 270 degrees in IE8
(3 answers)
Closed 8 years ago.
I had a text rotated in all browsers except in IE8. I tried to use this method (matrix):
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-2.755455294239536e-16, M12=-1.5, M21=1.5, M22=-2.755455294239536e-16, SizingMethod='auto expand')";
but it didn't work !!
can someone help? is there anything new about this issue?

you have to use filter property for supporting IE8. Here is the Demo.
you can change the degree by by defining the integer value (0,1,2,3)
div
{
width:150px;
height:150px;
-ms-transform:rotate(9deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*FOR IE8*/
}

IE8 won't support most of the mordern features. Try if mordernizr js helps..
http://modernizr.com/

You may try some thing like
-ms-transform: rotate(-90deg);
90deg value need to be adjusted as per your requirement
original article as follows http://css-tricks.com/snippets/css/text-rotation/
there is also a hack for older IE version as follows
-sand-transform: rotate(10deg);
more info here CSS3 transform: rotate; in IE9
Hope it helps!

CSS 3 text shadow in IE

I'm using CSS 3 text shadow to simulate bevel and emboss effect in my web app. The problem is IE 10 shows very bad looking shadow. I didn't checked it on IE 9 still now. But Can it be fixed?
This is the CSS I'm using ::
text-shadow: 0px 1px 1px #A4A4A4;
filter: dropshadow(color=#A4A4A4, offx=0, offy=-1);
Is there any javascript library to show text shadow in IE? or any other tricks that will help me? Or any extra CSS properties to add to solve this?

You could try the other shadow filter.
.shadow {
/* For IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Or use a behaviour file that simulates CSS3:
http://fetchak.com/ie-css3/
Update: Sorry, I misread, that shadow filter is for box-shadow, not text-shadow.
Internet Explorer does not suppurt text-shadow, but you can simulate this with a drop-shadow and a glow filter, see this tutorial.