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

شروع موضوع توسط echessdesign ‏25 آگوست 2006 در انجمن زبان HTML

وضعیت موضوع:
موضوع بسته شده است.
  1. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    هک 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 در ‏23 سپتامبر 2008
    setare_star_h، webmasterafkari، mf2fx و 4 نفر دیگر از این ارسال تشکر کرده اند.
  2. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    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 در ‏24 اکتبر 2008
    mf2fx، pouya saadeghi و leomostafa از این ارسال تشکر کرده اند.
  3. echessdesign

    echessdesign مدیر انجمن طراحی وب

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

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
     
    پاینده باشید


    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏7 نوامبر 2009
    iar11، mf2fx، Amenocy و 2 نفر دیگر از این ارسال تشکر کرده اند.
  4. echessdesign

    echessdesign مدیر انجمن طراحی وب

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

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
     
    پاینده باشید
     
    نوشته شده توسط echessdesign در ‏7 نوامبر 2009
    webmasterafkari، mf2fx، Amenocy و یک نفر دیگر از این ارسال تشکر کرده اند.
  5. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    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 در ‏23 نوامبر 2009
    mohan21، mf2fx، Amenocy و یک نفر دیگر از این ارسال تشکر کرده اند.
  6. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    چگونه پس زمینه عکس صفحه 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 شود) به زبان فارسی.
    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏20 ژانویه 2010
    tarenoco، vahidd.com، زمستون و 10 نفر دیگر از این ارسال تشکر کرده اند.
  7. aliReza

    aliReza Well-Known Member

    ارسال‌ها:
    488
    تشکر شده:
    1,103
    امتیاز دستاورد:
    93
    سلام
    تصمیم گرفتم چند هک CSS رو برای مرورگر محبوب خودم یعنی سافاری اینجا قرار بدم
    امیدوارم بتونید ازشون استفاده کنید

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

    مثل این:

    کد (Text):
    #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 بک گراند به رنگ آبی و در سایرین به صورت قرمز هست

    کد (Text):
    body { background-color: red; }
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body { background-color: blue; }
    انشالله ادامه میدم کد ها رو

    منبع: تارنمای پارسیان
     
    آخرین ویرایش: ‏7 فوریه 2010
    نوشته شده توسط aliReza در ‏7 فوریه 2010
    bluekerm، baviran، mf2fx و 2 نفر دیگر از این ارسال تشکر کرده اند.
  8. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    نمایش صحیح مقدار inline-level درIE6, IE7 & FF2

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

    در IE6, IE7:
    کد (Text):

        <style>
        li {
        display: inline-block;
        *display: inline; // Jahate hack ie
        }
        </style>
     
    و در FF2 بدین شکل عمل کنید:
    کد (Text):

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

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

    کد (Text):
    * html .myclass { display:inline; }  /* for IE 6 */
    * + html .myclass { display:inline; }  /* for IE 7 */
    یا این روش:
    کد (Text):
    .myclass {
      display: -moz-inline-box;
      display: inline-block;
    }
    * html .myclass { display:inline; }  /* for IE 6 */
    * + html .myclass { display:inline; }  /* for IE 7 */
    موفق باشید
    حسین سعیدی

    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏5 ژوئن 2011
  9. tarenoco

    tarenoco Member

    ارسال‌ها:
    216
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    من برای آموزش تصویری این مطلب اموزشی هرچی گشتم چیزی چیدا نکرم ممنون میشم راهنمایی کنید
     
    نوشته شده توسط tarenoco در ‏3 مارس 2014
  10. luxazan

    luxazan New Member

    ارسال‌ها:
    4
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    »نظورتون از حک کردن CSS رو اصلا نفهمیدم. چون فایل های CSS اصلا روی سرور اجرا نمی شن که و صرفا روی اینترفیس و توسط بروزر اجرا می شند !!!
     
    نوشته شده توسط luxazan در ‏9 ژوئن 2017
  11. the_king

    the_king مدیرکل انجمن

    ارسال‌ها:
    11,264
    تشکر شده:
    11,576
    امتیاز دستاورد:
    113
    منظور از CSS Hack نفوذ به سیستم یا ساختاری نیست، این Hack ارتباطی با اون بحث نفوذ نداره. CSS در مرورگر های مختلف با نسخه های متفاوت تاثیر دقیقا یکسانی نداره، به همین جهت ممکنه با یک CSS یکسان نمایش و نتیجه متفاوتی گرفته بشه. CSS Hack شامل مواردی ئه که بتوانید برای مرور گر های متفاوت CSS ها رو بصورت تفکیک شده پردازش کنید تا دقیقا یک نمایش یکسان رو از همه مرورگر ها بگیرید.
    مثلا موتور هر مرورگری یک پیشوند مخصوص خودش رو داره، فرضا -o- برای مرورگر های قدیمی Opera بود، -moz- برای مرورگر Firefox ئه. اگه مثلا لازمه تعریفی صرفا برای Opera باشه، دنبال تعاریفی باید باشید که این پیشوند -o- رو دارند.
     
    نوشته شده توسط the_king در ‏9 ژوئن 2017
  12. آدراپانا

    آدراپانا New Member

    ارسال‌ها:
    2
    تشکر شده:
    1
    امتیاز دستاورد:
    3
    هک CSS تا چه حد می تونه جدی باشه ؟
    فراتر از تخریب استایل هم می تونه عمل کنه ؟
     
    نوشته شده توسط آدراپانا در ‏18 جولای 2017
  13. the_king

    the_king مدیرکل انجمن

    ارسال‌ها:
    11,264
    تشکر شده:
    11,576
    امتیاز دستاورد:
    113
    این هکی نیست که بزور وارد استایل بشه، هک CSS فقط جنبه مثبت داره، خود طراح برای اینکه استایلش با مرور گرهای مختلف یکجور ظاهر بشه از هک CSS استفاده می کنه، تفاوت مرورگر ها در نمایش یک CSS استاندارد مجبورش می کنه که جاهایی از هک استفاده کنه. این هک اصلا همچین معنایی نداره که کسی استایل سایت شخص دیگری رو هک کنه.
     
    نوشته شده توسط the_king در ‏19 جولای 2017
  14. آدراپانا

    آدراپانا New Member

    ارسال‌ها:
    2
    تشکر شده:
    1
    امتیاز دستاورد:
    3
    ممنون از توضیحاتتون
    آخه تازگی با این قضیه رو به رو شدم که وجود target="_blank" در لینک می تونه برای وبسایت خطر امنیتی داشته باشه. دلیلشم مربوط به کد جاوا اسکریپتی بود که بعد از کلیک روی لینک اجرا می شد. الان وردپرس به صورت خودکار برای لینک های target="_blank" l این رو قرار میده (rel="noopener noreferrer") تا از مشکل امنیتی جلوگیری کنه.
     
    نوشته شده توسط آدراپانا در ‏19 جولای 2017
    the_king از این پست تشکر کرده است.
  15. toxin

    toxin Active Member

    ارسال‌ها:
    155
    تشکر شده:
    156
    امتیاز دستاورد:
    43
    عالی بود . ولی مطالب کاربردی تر نیاز است
     
    نوشته شده توسط toxin در ‏20 آگوست 2017
  16. vafa11

    vafa11 New Member

    ارسال‌ها:
    5
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام

    مهندس یعنی الان سایتی که با اچ تی ام ال و سی اس اس نوشته شده باشه حتما قابل هک هست؟؟؟
     
    نوشته شده توسط vafa11 در ‏22 ژانویه 2018
  17. toxin

    toxin Active Member

    ارسال‌ها:
    155
    تشکر شده:
    156
    امتیاز دستاورد:
    43
    نه هک نمیشه دوست عزیز
     
    نوشته شده توسط toxin در ‏22 ژانویه 2018
  18. m94azm

    m94azm New Member

    ارسال‌ها:
    16
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    استفاده عملیش خیلی کمه
     
    نوشته شده توسط m94azm در ‏11 جولای 2018
وضعیت موضوع:
موضوع بسته شده است.

به اشتراک بگذارید