روش های هک کردن Css

echessdesign · Sep 23, 2008

هک CSS برای مرورگر ها Google Chorm و Safari 3.1

هک CSS برای مرورگر ها Google Chorm و Safari 3.1
مرورگر Chorm همانند مرورگر Safari 3.1 از تمامی انتخاب کننده ها (Selector) پشتیبانی می کند.
شما با استفاده از مثال زیر می توانید یک فیلتر (منظور اختصاص ) برای 2 مرورگر بالا درنظر بگیرید:

HTML:

body:nth-of-type(1) {
   background: #333333;
}

در صورتی که شما در نظر دارید برای یک inline-lever یا block-lever فیلتری اعمال کنید، می توانید از مثال زیر بهره ببرید:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echessdesign.com</title>

<style type="text/css">
body:nth-of-type(1) {
   background: #333333;
}
body:nth-of-type(1) .echess{
   background: #ff0;
}
body:nth-of-type(1) #echess{
   background: #f00;
}
</style>
</head>

<body>

	<span class="echess">
		echessdesign.com
	</span>

	<div id="echess">
		echessdesign.com
	</div>
</body>

</html>

در ادامه به روش های هک مرورگر Safari 3.1 خواهم پرداخت.

منبع: تارنمای پارسیان

echessdesign · Oct 24, 2008

Reset CSS
درود بر شما
ایا برای شما پیش امده که هرزمان برای طراحی یک فایل CSS که به یک صفحه لینک شده است، مجبور شده اید که تغییرات پیش فرض را لغو کرده و تغییرات رایج را اعمال نمایید؟
مثلا برای از بین بردن فضای خالی در صفحه، به خصیصه body ،مقدار های padding و margin آن را برابر صفر کرده، تا مشکل حل شود.
نظر شما چیست که مابقی خصیصه ها را یک جا از حالت پیش فرضف به صورت دلخواه و رایج در آوریم؟

HTML:

html,  body,  div,  span,  applet,  object,  iframe,  h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,  a,  abbr,  acronym,  address,  big,  cite,  code,  del,  dfn,  em,  font,  img,  ins,  kbd,  q,  s,  samp,  small,  strike,  strong,  sub,  sup,  tt,  var,  dl,  dt,  dd,  ol,  ul,  li,  fieldset,  form,  label,  legend,  table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td  { 
border:0pt  none; 
font-family:inherit; 
font-size:100%; 
font-style:inherit; 
font-weight:inherit; 
margin:0pt; 
outline-color:invert; 
outline-style:none; 
outline-width:0pt; 
padding:0pt; 
vertical-align:baseline; 
} 
table  { 
border-collapse:separate; 
border-spacing:0pt; 
} 
caption,  th,  td  { 
font-weight:normal; 
text-align:left; 
} 
blockquote:before,  blockquote:after,  q:before,  q:after  { 
content:""; 
} 
blockquote,  q  { 
quotes:""  ""; 
} 
strong  { 
font-weight:bold; 
} 
em  { 
font-style:italic; 
} 
*  { 
margin:0pt; 
padding:0pt; 
}

منبع: تارنمای پارسیان

echessdesign · Nov 7, 2009

درود بر شما
مرورگر IE جزو مرورگر های مدرن به حساب نمیاد و متاسفانه بیشترین وقت طراح رو (مخصوصا در ایران)، برای یکسان سازی نمایش در مرورگر ها، تلف می کند.
در صورتی که شما سایت خود را برای مرورگر IE7 طراحی نموده و وقت آن را ندارید که برای IE8 نیز تست کنید، می توانید با دادن تگ متا زیر، از IE8 بخواهید که صفحه را مانند IE7 تفسیر نماید:

HTML:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

پاینده باشید

منبع: تارنمای پارسیان

echessdesign · Nov 7, 2009

درود بر شما
مرورگر IE جزو مرورگر های مدرن به حساب نمیاد و متاسفانه بیشترین وقت طراح رو (مخصوصا در ایران)، برای یکسان سازی نمایش در مرورگر ها، تلف می کند.
در صورتی که شما سایت خود را برای مرورگر IE7 طراحی نموده و وقت آن را ندارید که برای IE8 نیز تست کنید، می توانید با دادن تگ متا زیر، از IE8 بخواهید که صفحه را مانند IE7 تفسیر نماید:

HTML:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

پاینده باشید

echessdesign · Nov 23, 2009

CSS Height 100%

چگونه ارتفاع box مورد نظر خود را، با ارتفاع مروگر به صورت اتوماتیک ست کنیم.

درود بر شما

شما می خواهید مقدار ارتفاع یک Box رو با ارتفاع مرورگر ست کنیم، کافیست که از راه آن وارد شویم و جور دیگری به IE بفهمانیم:

در ابتدا مقدار ارتفاع body را 100 در صد در نظر میگیریم:

HTML:

html, body { height:100%;}

سپس حد اقل ارتفاع Box مورد نظر خودمون را با استفاده از خصیصه min-height هم 100 در صد نظر میگیرم، اما مشکل این خصیصه این است که در مرورگر IE پشتیبانی نمی شود:

HTML:

#box {min-height:100%;}

برای حل مشکل این خصیصه، به IE می فهمانیم که ارتفاع BOX ما که در html وجود دارد را 100 در صد در نظر بگیرد:

HTML:

* html #box{height:100%;}

زمانی که کد را اعمال کنیم:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echessdesign</title>
<style type="text/css">
* {
	padding:0;
	margin:0;
	border:0;
}
html, body {
	height:100%;
}
#echessdesign {
	min-height:100%;
	background:red;
	width:400px;
}
* html #echessdesign {
	height:100%;	
}

</style>
</head>

<body>
<div id="echessdesign">
	<a href="www.echessdesign.com">echessdesign.com</a>
</div>
</body>

</html>

با خیال را حت، حتی در نسخه 5.5 مرورگر ie هم جواب می ده.
پاینده باشید.

منبع: تارنمای پارسیان

echessdesign · Jan 20, 2010

چگونه پس زمینه عکس صفحه 100% باشد (چگونه عکس پس زمینه resize شود)

درود بر شما
همانطور که میدانید، نمی توان عکس پس زمینه صفحه را با طول و عرضی با مقدار های 100% داشت.
به زبان ساده تر، نمی توان عکسی رو پس زمینه صفحه قرار داد که با تغییر رزولیشن صفحه، عکس نیز تغییر سایز دهد. (در CSS2)
اما شما می توانید از طریق این روش، به خواسته خود برسید.

1- ابتدا، مشخص می کنیم که طول و عرض صفحه ما، برابر 100% باشد و زمانی که حجم اطلاعات صفحه زیاد شد، Scroll Bar مخفی شود.

HTML:

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}

***

2- حالا برای عکسی که قرار است به اندازه طول و عرض صفحه ما، تغییر سایز بدهد، مقدار تعریف می کنیم.
بدین شکل که می گوییم، موقعیت آن، شناور باشد. طول و عرض آن 100% باشد. از body صفحه، در موقعیت بالاتری قرار بگیرد.
(z-index دقیقا بدین شکل است که هر عنصری که مقدار بیشتری داشته باشد، زمانی که از بالا بر صفحه نگاه شود، بر روی عنصری قرار گیرد که مقدار کم تری داشته باشد.)

HTML:

#background{position:absolute; z-index:1; width:100%; height:100%;}

***

3- درست است که ما scroll bar رو از body حذف کردیم، اما این دلیل نمی شود که به آن احتیاج نداشته باشیم!
در نتیجه تمامی اطلاعات سایت ما، داخل جعبه ای به نام scroller قرار می گیرد.
وضعیت آن را در صفحه شنا ور می کنیم، اما اول مشخص می کنیم که در نقطه صفر از محور X و Y ها قرارگیرد تا از بالای صفحه سمت چپ شروع شود.
سپس می گوییم که اگر محتوای صفحه زیاد شد، scroll bar داشته باشد. سپس با دادن مقدار بیشتری z-index نسبت به مقداری که برای عکس پس زمینه در نظر گرفتیم، این نکته را مشخص می کنیم که بر روی عکس قرار گیرد.
و مشخص می کنیم که این حق را دارد تا سایز آن، باسایز کل صفحه یکی باشد.

HTML:

#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}

***
4- کار تمام شد.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echessdesign.com</title>
<style type="text/css">
	html, body {
		width:100%;
		height:100%;
		padding:0; margin:0; border:0;
		overflow:hidden;
	}
	#background{
		width:100%;
		height:100%;
		z-index:1;
		position:absolute;
	}
	#scroll {
		width:100%;
		height:100%;
		z-index:2;
		position:absolute;	
		overflow:scroll;
		top:0;
		left:0;
	}
	#text {
		margin:0 auto;
	}
</style>
</head>

<body>
   	<img src="Philippe Salomon.jpg"  id="background"  alt="" />
    	<div id="scroll">
        	<div id="text">
            	<p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
                <p>www.echessdesign.com  www.echessdesign.com www.echessdesign.com www.echessdesign.com www.echessdesign.com  </p>
        </div>
    </div>

</body>
</html>

اولین توضیح چگونه پس زمینه عکس صفحه 100% باشد (چگونه عکس پس زمینه resize شود) به زبان فارسی.
منبع: تارنمای پارسیان

aliReza · Feb 7, 2010

سلام
تصمیم گرفتم چند هک CSS رو برای مرورگر محبوب خودم یعنی سافاری اینجا قرار بدم
امیدوارم بتونید ازشون استفاده کنید

1. به طور کلی هنگامی که شما علامت # را بعد از ; قرار میدین، تمام استایل هایی که داخل اون براکت (فارسی ش میشه قلاب!!) قرار میدین، توسط سافاری نادیده گرفته میشن...

مثل این:

کد:

#testBox{
    background:#063
}
#testBox{
    // Safari won't read the next line
    // because of the floating pound sign
    background:#c00;
    [B]#[/B]
}

این کد فکر میکنم در CSS ولیدیتور معتبر نیست

2. توسط این کد در سافاری 3، کروم و اپرا > 9.5 بک گراند به رنگ آبی و در سایرین به صورت قرمز هست

کد:

body { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    body { background-color: blue; }

انشالله ادامه میدم کد ها رو

منبع: تارنمای پارسیان

echessdesign · Jun 5, 2011

نمایش صحیح مقدار inline-level درIE6, IE7 & FF2

سلام دوستان عزیز
مشکلی که در استفاده از مقدار inline-block وجود داره این هست که این خصیصه در مرورگر های IE6, IE7 & FF2 پشتیبانی نمی شوند! برای حل این مشکل می توان به شکل زیر عمل کرد:

در IE6, IE7:

کد:

    <style>
    li {
    display: inline-block;
    *display: inline; // Jahate hack ie
    }
    </style>

و در FF2 بدین شکل عمل کنید:

کد:

    <style>
    li {
    display: -moz-inline-stack; // Jahate hack Firefox 2
    }
    </style>

**

روش های دیگری نیز وجود داره:

کد:

* html .myclass { display:inline; }  /* for IE 6 */
* + html .myclass { display:inline; }  /* for IE 7 */

یا این روش:

کد:

.myclass {
  display: -moz-inline-box;
  display: inline-block;
}
* html .myclass { display:inline; }  /* for IE 6 */
* + html .myclass { display:inline; }  /* for IE 7 */

موفق باشید
حسین سعیدی

منبع: تارنمای پارسیان

tarenoco · Mar 3, 2014

من برای آموزش تصویری این مطلب اموزشی هرچی گشتم چیزی چیدا نکرم ممنون میشم راهنمایی کنید

luxazan · Jun 9, 2017

»نظورتون از حک کردن CSS رو اصلا نفهمیدم. چون فایل های CSS اصلا روی سرور اجرا نمی شن که و صرفا روی اینترفیس و توسط بروزر اجرا می شند !!!

the_king · Jun 9, 2017

luxazan گفت:
»نظورتون از حک کردن CSS رو اصلا نفهمیدم. چون فایل های CSS اصلا روی سرور اجرا نمی شن که و صرفا روی اینترفیس و توسط بروزر اجرا می شند !!!

منظور از CSS Hack نفوذ به سیستم یا ساختاری نیست، این Hack ارتباطی با اون بحث نفوذ نداره. CSS در مرورگر های مختلف با نسخه های متفاوت تاثیر دقیقا یکسانی نداره، به همین جهت ممکنه با یک CSS یکسان نمایش و نتیجه متفاوتی گرفته بشه. CSS Hack شامل مواردی ئه که بتوانید برای مرور گر های متفاوت CSS ها رو بصورت تفکیک شده پردازش کنید تا دقیقا یک نمایش یکسان رو از همه مرورگر ها بگیرید.
مثلا موتور هر مرورگری یک پیشوند مخصوص خودش رو داره، فرضا -o- برای مرورگر های قدیمی Opera بود، -moz- برای مرورگر Firefox ئه. اگه مثلا لازمه تعریفی صرفا برای Opera باشه، دنبال تعاریفی باید باشید که این پیشوند -o- رو دارند.

آدراپانا · Jul 18, 2017

هک CSS تا چه حد می تونه جدی باشه ؟
فراتر از تخریب استایل هم می تونه عمل کنه ؟

the_king · Jul 19, 2017

آدراپانا گفت:
هک CSS تا چه حد می تونه جدی باشه ؟
فراتر از تخریب استایل هم می تونه عمل کنه ؟

این هکی نیست که بزور وارد استایل بشه، هک CSS فقط جنبه مثبت داره، خود طراح برای اینکه استایلش با مرور گرهای مختلف یکجور ظاهر بشه از هک CSS استفاده می کنه، تفاوت مرورگر ها در نمایش یک CSS استاندارد مجبورش می کنه که جاهایی از هک استفاده کنه. این هک اصلا همچین معنایی نداره که کسی استایل سایت شخص دیگری رو هک کنه.

آدراپانا · Jul 19, 2017

the_king گفت:
این هکی نیست که بزور وارد استایل بشه، هک CSS فقط جنبه مثبت داره، خود طراح برای اینکه استایلش با مرور گرهای مختلف یکجور ظاهر بشه از هک CSS استفاده می کنه، تفاوت مرورگر ها در نمایش یک CSS استاندارد مجبورش می کنه که جاهایی از هک استفاده کنه. این هک اصلا همچین معنایی نداره که کسی استایل سایت شخص دیگری رو هک کنه.

ممنون از توضیحاتتون
آخه تازگی با این قضیه رو به رو شدم که وجود target="_blank" در لینک می تونه برای وبسایت خطر امنیتی داشته باشه. دلیلشم مربوط به کد جاوا اسکریپتی بود که بعد از کلیک روی لینک اجرا می شد. الان وردپرس به صورت خودکار برای لینک های target="_blank" l این رو قرار میده (rel="noopener noreferrer") تا از مشکل امنیتی جلوگیری کنه.

toxin · Aug 20, 2017

عالی بود . ولی مطالب کاربردی تر نیاز است

vafa11 · Jan 22, 2018

سلام

مهندس یعنی الان سایتی که با اچ تی ام ال و سی اس اس نوشته شده باشه حتما قابل هک هست؟؟؟

toxin · Jan 22, 2018

vafa11 گفت:
سلام

مهندس یعنی الان سایتی که با اچ تی ام ال و سی اس اس نوشته شده باشه حتما قابل هک هست؟؟؟

نه هک نمیشه دوست عزیز

m94azm · Jul 11, 2018

echessdesign گفت:
از طریق CSS روش هایی وجود دارد که بر خلاف متد های متداول می باشد که تاثیر گزاری بر مرور گر می گزارد. به ترتیب زمان به پردازش و مثال زدن در باره آن ها خواهیم پرداخت.
در این روش Background صفحه شما در مرورگر IE 6.0 سبز و در بقیه مرور گرها قرمز میباشد که عبارتند از: Netscape 7.2, Opera 9.0, FireFox 2.0

HTML:

<style type="text/css"> body {background: red; * background: green; } </style>

جالب اینجاست که در خود نرم افزار FrontPage 2003 , Background صفحه قرمز هست!
لطفا با نظرات ارزنده خود مارا در جهت کیفیت مقالات بهتر یاری فرمایید.

منبع: تارنمای پارسیان

استفاده عملیش خیلی کمه